[BUG] OR semantics with Playwright Selector Chaining (`>>`)

Context:

• Playwright Version: 1.24.2
• Operating System: Mac
• Node.js version: 18.5
• Browser: All
• Extra: N/A

Describe the bug

I’m using the >> selector in a broader statement made up of multiple selectors that is passed to a PlaywrightPage.locator, specifically, this:

fieldset:has-text('URL') >> input, button:has-text('Link Your Project')

Each of these independently (fieldset:has-text('URL') >> input and button:has-text('Link Your Project')) matches elements on the page, but when combined together, only the elements matching fieldset:has-text('URL') >> input are selected. This leads me to believe that the >> operator is corrupting the whole statement; Just like with CSS selectors, I’d expect the , to separate the individual statements so they can be evaluated independently, and their results combined.

Is there something I am misunderstanding about the >> operator, or is this a bug?

[rwoll]

I reviewed the following with @dgozman. It is working as expected and the last statement will fail:

import { test, expect } from '@playwright/test';

test('should work', async ({ page }) => {
  await page.setContent(`
    <form>
      <fieldset>
        <label for="url">URL</label><br/>
        <input type="text" id="url" name="url">
      </fieldset>
      <button>Link Your Project</button>
    </form>
  `);
  await expect(page.locator("fieldset:has-text('URL') >> input")).toBeVisible();
  await expect(page.locator("button:has-text('Link Your Project')")).toBeVisible();
  await expect(page.locator("fieldset:has-text('URL') >> input, button:has-text('Link Your Project')")).toHaveCount(2);
});

In this particular case, it can simply be fixed by dropping the use of >>:

  await expect(page.locator("fieldset:has-text('URL') input, button:has-text('Link Your Project')")).toHaveCount(2);

There’s currently not a great way of expressing OR semantics when using the Playwright chaining (>>) locator.

[rwoll]

@GunjanSheth Thanks for your example! Looks like I forgot the awaits in my JS example leading me to the wrong conclusion. 🤦

Let me touch base with the team to sort out expected precedence of these operators so we can clarify in the docs as needed or apply fixes depending on the conclusion.