Playwright .NET NUnit: Locating nested checkbox within divs

Question

In my PlayWright application (.NET within NUnit). I am trying to tick the 'Yes' box of Question 2 below

Here's my code:

await page
    .Locator("div").Filter(new() { HasText = "Question 2 (Help find me and tick yes)" })
    .Locator("label").Filter(new() { HasText = "Yes" })
    .Locator("span").ClickAsync();

The aim for me is that it will filter out all other 'divs' and only return the div with question 2 thanks to the filter on "Question 2 (Help find me and tick yes)"

I'm getting the below error message in that it doesn't seem to be correctly filtering out the first Question.

Microsoft.Playwright.PlaywrightException : Error: strict mode violation: Locator("div").Filter(new() { HasText = "Question 2 (Help find me and tick yes)" }).Locator("label").Filter(new() { HasText = "Yes" }).Locator("span") resolved to 2 elements:

html (angular):

<app-custom-angular-app1>
   <div>
      <label>Question 1</label>
      <app-yes-no>
         <fieldset>
            <div><label>Yes<input type="radio" required=""><span class="radioButton"></span></label></div>
            <div><label>No<input type="radio" required=""><span class="radioButton"></span></label></div>
         </fieldset>
      </app-yes-no>
   </div>
</app-custom-angular-app1>
<app-custom-angular-app2>
   <div>
      <label>Question 2 (Help find me and tick yes)</label>
      <app-yes-no>
         <fieldset>
            <div><label>Yes<input type="radio" required=""><span class="radioButton"></span></label></div>
            <div><label>No<input type="radio"required=""><span class="radioButton"></span></label></div>
          </fieldset>
      </app-yes-no>
   </div>
</app-custom-angular-app2>

Is your system under test Angular HTML really that barren? Or are you trying to force the usage of filter method in your question? I am not sure whether the above is for work or personal, but in a professional environment I would start talking to the dev team to include either an `id` or `data-testid=` on certain important fields as this is pretty ridiculous. Then you could simply use standard locator strategies. — BernardV, Jul 21 '23 at 06:38
Thanks for coming back to me. The code is altered heavily for the simplicity of the question and privacy of the company. But yes, there are no ids on any of the fields and the second best way for me to write the test is to reference the text, the way a user would be testing manually but also to improve readability of the tests. — sam.tldr, Jul 23 '23 at 22:37

Vishal Aggarwal · Accepted Answer · 2023-07-24T16:34:14.620

1

This should make it unique by adding fieldset:

await page
    .Locator("fieldset div").Filter(new() { HasText = "Question 2 (Help find me and tick yes)" })
    .Locator("label").Filter(new() { HasText = "Yes" })
    .Locator("span").ClickAsync();

Note: The problem with HasText is , it matches any element containing specified text somewhere inside, also in a child or even in a descendant element somewhere down in the tree.

So as its very broad in scope , narrow it down by ensuring uniqueness.

edited Jul 24 '23 at 16:34

answered Jul 21 '23 at 16:34

Vishal Aggarwal

1,929
1
13
23

Thanks - I did try your modification, but unfortunately it was still bringing up other elements and receiving the same error (just with less results). I have decided to follow another commenters advice and add ids to elements I am trying to interact with. – sam.tldr Jul 24 '23 at 00:45

Playwright .NET NUnit: Locating nested checkbox within divs

1 Answers1