Does page.click works with AND or OR logic for multiple selectors

[AjaiGanesh]

Steps to reproduce

Tell us about your environment:

• Puppeteer version: 1.15.0
• Platform / OS version: Ubuntu 16.04 LTS
• URLs (if applicable):
• Node.js version: v9.2.0

What is the expected result?

Click on a element with given selectors

What happens instead?
I am trying to click on the below element using specific attribtes

<input type="search" name="keywords" value="" class="textCtrl" placeholder="Search..." title="Enter your search and hit enter" id="QuickSearchQuery">

I am able to page.click on this element using

page.click('input[type="search"])

page.click('input[type="search"],input[placeholder="Search..."]')

page.click('input[type="search"],input[placeholder="Search..."],input[name="keywords"]')

page.click('input[type="search"],input[placeholder="Search..."],input[name="keywords"],input[title="Enter your search and hit enter"]')

page.click('input[type="search"],input[placeholder="Search..."],input[title="Enter your search and hit enter"],input[id="QuickSearchQuery"]')

But the moment I include input[value=""] or input[class="textCtrl"] in the above, it fails with the error

"Node is either not visible or not an HTMLElement"

Additionally i have noticed that the attributes value="" and class="textCtrl" occur multiple times in the page since they are used in other tags too (div, li, button etc)

But I need to include all the tags to page.click, cause there are 2 search buttons on the same page and i need to click on this specific one alone.

Can you suggest the best way to click an element with multiple selector using "AND" condition.

[ryo-hisano]

Hi! AjaiGanesh.

How is this method?
In this way, a strict choice of DOM is possible.

page.click('input[type="search"][value=""][class="textCtrl"][placeholder="Search..."][title="Enter your search and hit enter"]');

[aslushnikov]

But the moment I include input[value=""] or input[class="textCtrl"] in the above, it fails with the error
"Node is either not visible or not an HTMLElement"

@AjaiGanesh commas in CSS selectors mean "OR". Every time you add more selectors using commas, you're widening the subset of elements that match this rule.

Now, Puppeteer uses the selector you provided to fetch the element from the page. As you broaden your seelector with another comma-separated part, you likely to fetch another element that is actually hidden on the page. So the page.click starts to fail.

The easy way to check that is to open developer tools on the website and run document.querySelector() with the selector that fails for you. The returned element will be the one that we try to click, and it looks like it is actually hidden.

But I need to include all the tags to page.click, cause there are 2 search buttons on the same page and i need to click on this specific one alone.

You can generate a unique CSS selector using Chrome Developer tools "Copy > Copy Selector" feature of the Elements Panel.

Hope it helps.