Trouble selecting a classname with waitForSelector in Playwright-CodePudding

I am scraping a page and this is the data I'm looking for:

<div >
<span >Total balance</span>
<span >$10</span>
</div>

If I look for the text "total balance," I can find it:

await page.waitForSelector('text=Total balance');

But if I try to find a classname, it times out:

await page.waitForSelector('.account-balance');

I've tried waitForSelector as well as locator, and whenever I target a classname like this, it fails. Thanks for any help.

CodePudding user response：

There may be possibility that there are multiple class with same value. You can try with xpath.

await page.waitForSelector(xpath=//div[@class='account-balance']);

await page.waitForSelector(xpath=//span[text()='Total balance']/..);

CodePudding user response：

You have to go to the class name for the text Total balance and then wait for it.

await page.waitForSelector('.account-balance > .name');

CodePudding user response：

Instead of using a selector engine (like text or css), try using this

span:has-text('Total balance');

Also, check if there are multiple text with Total balance. In that case, you case use the nth matcher to select the text - for e.g. you can use this locator to select the 3rd instance of Total balance

await page.locator(':nth-match(:text("Total balance"), 3)').click();