Trouble selecting a classname with waitForSelector in Playwright

user_17380958 0
Viewed 126

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

<div class="account-balance">
<span class="name">Total balance</span>
<span class="balance">$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.

playwright web-scraping javascript
3 Answers

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']);

Or

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

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();
user_17287900

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

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