Rayrun
← Back to Discord Forum

Help with Locating Deeply Nested Div

madeline_pcposted in #help-playwright
Open in Discord
madeline_pc
madeline_pc

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>

Screenshot_2023-07-12_at_3.27.41_PM.png

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

You can use the all method to get all the prices

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

here is the example

laurent_autom
laurent_autom

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.

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

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

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

madeline_pc
madeline_pc
@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_autom
laurent_autom
@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

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

TwitterGitHubLinkedIn
AboutQuestionsDiscord ForumBrowser ExtensionTagsQA 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 luc@ray.run.