[REGRESSION]: css/xpath selector engines don't work when chained with >>

[fbasso]

Context:

• GOOD Playwright Version: 1.6.2
• BAD Playwright Version: 1.7.0
• Operating System: Windows 10
• Extra: -

Code Snippet

  <div>
    <label>Test</label>
    <input>
  </div>

const {chromium, webkit, firefox} = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  const input = await page.$('label >> xpath=.. >> input');
  await input.fill('Hello');
})();

Describe the bug

Hello,

Since the 1.7.0, it seems it's not possible to chain css/xpath selector engines. The code above ends with the following error:

TypeError: Cannot read property 'fill' of null

It worked well in the 1.6.2 version.

It also works well if done with several lines, this way:

  const label = await page.$('label');
  const parent = await label.$('xpath=..');
  const input = await parent.$('input');

Thanks !

[Tallyb]

I think the same is true for chaining css and text.

[dgozman]

The problem here is that xpath starts with .. and immediately goes out of "scope". I guess this is just a test example, but I'd suggest an easier workaround label ~ input if you'd like that, while we are working on the fix.

[dgozman]

@Tallyb

I think the same is true for chaining css and text.

This particular problem is about using text after *css capture, the fix #4749 will go into next patch release.

[fbasso]

The problem here is that xpath starts with .. and immediately goes out of "scope". I guess this is just a test example, but I'd suggest an easier workaround label ~ input if you'd like that, while we are working on the fix.

Thanks for the workaround. The real use case is to get the input based on the label text, in this particular pattern (inside a container). So I guess I will try something like label:text(...) ~ input and see if everything works fine. Anyway, I don't have a lot of tests yet, so I can live with it until the fix.

Thanks again for your answer!