← Back to Discord Forum


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


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

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

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

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

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

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

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

Related Discord Threads

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.