Rayrun
← Back to Discord Forum

how to locate <div> element based on class name, and open it’s HREF value.

ilovelamp69posted in #help-playwright
Open in Discord
ilovelamp69
ilovelamp69

Basically what the title says. I need to select a <div> element based on its class name, and open its hyperlink/href value.

Thank you

This thread is trying to answer question "How can I select a <div> element based on its class name and open its hyperlink/href value?"

3 replies
insanerookstar
insanerookstar

await page.locator('div.CLASS').click()?

insanerookstar
insanerookstar

Otherwise you can get a href value this way const href = await locator.getAttribute('href').

Try to locate components/tag based on 'test-id'. This helps if in future classname changes your test cases will still run.

Answer

Sure, let's dive right in!

First, you'll need to locate the <div> element with the class name. Let's say the class name is "my-div". You can use Playwright's page.locator() method with a CSS selector to find it:

const divElement = await page.locator('.my-div');

Next, you'll want to get the href value of this element. You can do this using the .getAttribute() method:

const hrefValue = await divElement.getAttribute('href');

Now, you have the href value! You can use it as you wish. For instance, if you want to open this hyperlink in a new tab, you can use the .goto() method:

await page.goto(hrefValue);

Remember, this is just one way to interact with a <div> element based on its class name and href value using Playwright. Your approach may vary depending on your specific needs.

For more insights on how to efficiently use Playwright, check out this blog post.

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.