CSS Selectors with changing values

I am doing some testing on this and am passing in the cssSelector value - I just need any of these three to be present then I want to continue. What’s the best way to feed in multiple cssSelectors so I’m looking for one OR the other to be displayed? I’ve tried the below, which works fine if one is passed in but if multiple are passed in with the || operator but it doesn’t seem to return true even if the correct object is present on the screen. Thanks!


objA = '[id=sponsored-14395] > div > div.actions.product__actions > div.actions__alignmentContainer > button'
objB = '[id*=sponsored-14395][id$=postCalone] > div > div.actions.product__actions > div.actions__alignmentContainer > button'
objC = '[id*=sponsored-14395][id$=prevClone] > div > div.actions.product__actions > div.actions__alignmentContainer > button'

boolean webElement = driver.findElement(By.cssSelector(objA||objB||objC)).isDisplayed()

Two things:

1.) Here again, we need to be careful what we’re checking. You say:

But you go on to check for visibility:

boolean webElement = driver.findElement(By.cssSelector(objA||objB||objC)).isDisplayed()

There’s an important distinction between the two.

The above code will break (a NoSuchElementException will be thrown) if none of the three are present, because it’s impossible to check visibility on a nonexistent element. So, assuming that you actually want to check if any one of the elements is present, but not necessarily visible, use my first code snippet from above and be done with it.

If we instead assume you actually want to check if any one of the elements is visible, then an easy way to do it using the code you’ve already written could be:

boolean visible;
try {
    visible = driver.findElement(By.cssSelector(objA||objB||objC)).isDisplayed();
} catch(NoSuchElementException e) {
    visible = false;
}

This way, the element is considered “not visible” if either 1.) it doesn’t exist, or 2.) it exists but is not displayed. There are other ways to do this if that doesn’t work for you.

2.) I never use css locators, that’s more @Russ_Thomas’s department, but if you’re not restricted to using css, here’s how I would do it in xpath:

//*[contains(@id, ‘sponsored-14395‘)]//button

That may not be specific enough, but if you can share the HTML you are working with, I can give a better one. Again, if you’re committed to css, I’d work some more with Russ.

2 Likes

Thanks Brandon! I am definitely looking for visibility so I can interact with the object I need to. It’s a rotating carousel that’s causing me quite a bit of headache (I can stop carousel rotation, which is awesome). I played around a bit with your later suggestion but it seems to never fail even if the product isn’t visible (probably an object identification issue). I’m totally not committed to using the CSS selector - just trying to find something that consistently works!

Even in the case when I set the xPath passed in to JUST be the below…

 '//*[contains(@id, "sponsored-14395")]/div/div[4]/div[1]/button'

… and the object returned is DEFINITELY found at /div/div[4]/div[1]/button, it still seems unable to find it.

BUT if I pass in the exact xPath, it works fine…

//*[@id="sponsored-14395"]/div/div[4]/div[1]/button

Anyhow, the xPath values can be different but you’ll note that most of the ID remains constant:

The xpath value of the object is: //*[@id="sponsored-14395"]/div/div[4]/div[1]/button.
This can also be: //*[@id="sponsored-14395-postCalone"]/div/div[4]/div[1]/button
And lastly: //*[@id="sponsored-14395-prevClone"]/div/div[4]/div[1]/button

Either of the three is the same exact button for the same product. I just want to check for if it’s visible on screen (visible in the carousel) - if so, I’ll then click the button (I don’t care which of those three because again, same product, same button, slightly different name in the dom). If not, I’ll click the next slide and look again.

Please let me know if there’s more that you need and again, I sincerely appreciate the help!
Morgan

Is it possible for you to share the HTML you are working with?

I’ll message you - thanks!