Rayrun
BlogAsk AIToolsVideosQA WikiDiscord
← Back to Discord Forum

Selectors

Web DevelopmentPlaywright
jkeegan1posted in #help-playwright
Open in Discord
jkeegan1
jkeegan1

I need to click on an element generated by raphael js - https://dmitrybaranovskiy.github.io/raphael/

const rects = await page.$('div[class = "canvas sectionCanvas"]');

This seletor returns a very large object. I need to click on the 4th or 5th element in the childNode's nodeList screenshot. The screenshot is a nodelist from this query document.querySelectorAll('div[class = "canvas sectionCanvas"]')

Im having trouble getting a valid selector to click that rect element. Any advice helps. I already read the playwright selectors/element handles docs

image.png

This thread is trying to answer question "How can I click on a specific element in a nodeList generated by Raphael JS using a selector?"

5 replies
canstand

try page.locator('div[class = "canvas sectionCanvas"]').nth(4)

jkeegan1
jkeegan1

('div[class = "canvas sectionCanvas"]') this is not a valid locator. Thats why i used a selector

rluisn1

try to take a look in the docs. await page.locator("//*[@class="canvas sectionCanvas"]") also https://playwright.dev/docs/other-locators#xpath-union

jkeegan1
jkeegan1

ive never used xpath before. Ill have to look into this. thank you

jkeegan1
jkeegan1
.locator(
        `//div[contains(@class, 'canvas sectionCanvas')]|//*[@id="pages"]/div/div/div[2]/div/div/div/div/div[1]/svg/rect[4]']`
      )
      .click();```

I tried this xpath and it failed. I might have to do more research but i hovered on the element I wanted to click on and copied the xpath
Open in Discord

Related Discord Threads

BlogAsk AIToolsVideosQA WikiDiscord
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.