Blog Ask AI Tools Videos QA Wiki Discord

Help with Locating Deeply Nested Div

Background: I am trying to generate quotes from an internal website and then scrape the prices that are given. Since the prices can change depending on the product and other variables, I can't use nice locators like page.getByRole(), for instance.

Problem: Instead, I'm trying to use CSS locators to unpack a deeply nested div. (Eventually the plan is to write a for-loop to do part of this so I can get each price in a row, but for now I want to just get the first price, which is the Product Subtotal.)

Request: I'd really appreciate any help with determining if my locator below makes sense, and suggestions for how to improve it.

This is my locator so far: await page.locator("ul > .navbar-nav").locator("#dq-totals").locator('.total.d-flex.justify-content-end').locator('.d-flex.totals').locator('.container-fluid').nth(0).locator('.justify-content-between').locator('.col-12').innerText()

(I know it's gross)

Attached is the structure of the HTML as a screenshot, to compare my locator to.

Thanks for taking the time to read this question! ☺️ <:playwright:1054714813638516757>

This thread is trying to answer question "How can I improve my CSS locator to unpack a deeply nested div and scrape prices from an internal website?"

9 replies

pregotJuly 12 7:55 PM

You can use the all method to get all the prices

pregotJuly 12 7:56 PM

for (const row of await page.getByRole('listitem').all()) console.log(await row.textContent());

pregotJuly 12 7:56 PM

here is the example

laurent_automJuly 12 9:38 PM

Using xpath something like this should work. //li[@class='nav-item']//div[contains(text(), 'Product Subtotal')] You'll probably need to adjust it a little because I can't check it for you.

p01___July 13 6:54 AM

Remember the text and hasText locator arguments can be a regexp, so you could something like

page.getByRole("listitem").all()

To get each row, then for the colums:

youRowLocator.getByText(/\$/).all()

https://playwright.dev/docs/api/class-locator#locator-filter-option-has-text

p01___July 13 6:56 AM

That said, that markup is 😬 What I see there is really a table

p01___July 15 10:51 AM

Hi @madeline_pc, did you manage to get some cleaner locators to work for you tests?

madeline_pcJuly 15 2:46 PM

@p01___: Instead of looping over the container div I ended up selecting each element individually. It's working for now. 🙂

Instead of looping over the container div I ended up selecting each element individually. It's working for now. 🙂

laurent_automJuly 15 10:41 PM

@madeline_pc: Did you try to loop with xpath? I know it’s frowned upon to use this tech but it can still help a lot

Did you try to loop with xpath? I know it’s frowned upon to use this tech but it can still help a lot

Open in Discord

Answer

I'm sorry, but without more specific details, I can't provide guidance on your CSS locator for a deeply nested div. Please provide more context or rephrase your question. This way, I can give you the best possible assistance.

Related Discord Threads

Blog Ask AI Tools Videos QA Wiki Discord

About Questions Discord Forum Browser Extension Tags QA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email [email protected].