Playwright: [BUG] combined selector does not continue matching after first failure

[TrySound]

I just implemented selectors by text in puppeteer with xpath but would be happy to migrate to playwright and drop custom code from my tests.

Though the only case I don't understand how to handle is querying element by two selectors
Like with css we do button[type=submit] I need to combine text selector with css selection.

Here await page.$('text="next"') I need to get button but if "next" word is used somewhere else in UI the wrong element is returned. Is there a way to achieve this without manual result iterating?

[arjunattam]

Hi! We have the >> combinator to combine 2 or more selectors with different types (docs). Would something like this work for you?

[TrySound]

In this case text="next" >> css=button will look button inside of element with text, am I wrong? I need to find a button with text instead.

[arjunattam]

Thanks, I think I understand the confusion, and we should fix that. My understanding is that the combinator can be used to filter candidates _and_ search descendants (@dgozman can confirm?)

I was trying some combinations on a simple example, and we might have encountered a bug. While the following piece of code works, swapping the ordering for the two buttons breaks the script.

const { webkit } = require('playwright');

(async () => {
    const browser = await webkit.launch();
    const page = await browser.newPage();
    await page.setContent(`
    <div>
        <span>Next</span>
        <button class="one">Next</button>
        <button class="two">Previous</button>
    </div>
    `)
    console.log(await page.$eval('css=button >> text=Next', el => el.outerHTML));
    await browser.close();
})();

[dgozman]

This is indeed a bug, let me repurpose this issue into a bug report.