Jon Bell
Jon Bell

Reputation: 29

Trouble selecting a classname with waitForSelector in Playwright

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.

Upvotes: 2

Views: 2656

Answers (3)

demouser123
demouser123

Reputation: 4264

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

Upvotes: 0

Alapan Das
Alapan Das

Reputation: 18650

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

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

Upvotes: 0

Ketan Pardeshi
Ketan Pardeshi

Reputation: 782

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

Upvotes: 1

Related Questions