click only visible element selenium webdriverjs

Question

I have multiple div like below

<div class="one">send Message</div>

<div class="one">send Message</div>

<div class="one">send Message</div>

I have a web page where there is send Message buttons like above, in which only one button is visible at a time.Other two buttons are hidden via some javascript codes.So for example if 2nd button is visible , I should be able to click only that element.But in my selenium code , its trying to click first hidden div and its failing

 driver.findElements(by.className(".one")).then((els) => {
            var element = els[index];
            element.click();
        });

So basically I wanna convert below javascript code to Selenium nodejs code,If some one guide me that will be helpful

var all = document.getElementsByTagName("*");

for (var i = 0, max = all.length; i < max; i++) {
    if (isHidden(all[i]))
        // hidden
    else 
        // visible
}

function isHidden(el) {
    var style = window.getComputedStyle(el);
    return ((style.display === 'none') || (style.visibility === 'hidden'))
}

Did you try try/catch?

Andersson
– Andersson

2017-06-20 06:59:08 +00:00
Commented Jun 20, 2017 at 6:59 — Andersson
– Andersson, Commented Jun 20, 2017 at 6:59

Prabodh M · Accepted Answer · 2019-08-06 12:23:22Z

2

Do you want to click the button ( basically a div as far as code is concerned ) which is visible ?

If that is your main agenda, then the code you've written will fail to find desired element. As you are selecting the element by it's classname not its visibility.

Your code will find all the matched class element. As it's a basic element selector and all your buttons have the same class, so they are basically rendered on the page.

Approach 1

driver.findElements(by.className(".one")).then((els) => {
        for(var key in els){
             var element = els[key];
             if(element.isDisplayed()){ //if visible element
               element.click();            
             }
        }
    });

The Key here is to check if the element you are trying to click is visible on the page.

Approach 2

By giving a unique class to the target button. Some class for eg 'clickable' or 'active'. So it will be a more optimized solution to select the target element using the Css selector. The Key here is to give uniqueness to your target element to be more identifiable.

edited Aug 6, 2019 at 12:23

answered Jun 20, 2017 at 7:10

Prabodh M

2,2802 gold badges18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Prabodh M Over a year ago

Oops, I copied your code as it is. Actually you are getting set of elements. So you need to iterate them. Updated my code just check now.

Shakya RDN · Accepted Answer · 2017-06-20 07:06:23Z

0

Usually many Java Scripts are run in the node Js without the convert. Have you try it in the node Js without converting ??? ** Remember to import selenium

answered Jun 20, 2017 at 7:06

Shakya RDN

211 silver badge6 bronze badges

Collectives™ on Stack Overflow

click only visible element selenium webdriverjs

2 Answers 2

Approach 1

Approach 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Approach 1

Approach 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related