While conducting test automation using Selenium, I typically rely on css selectors to find elements. However, I recently came across a peculiar issue. I observed that in certain cases, the css selector works perfectly when tested in the browser console. For instance, to select a specific button among several, I use:
(1) $("div.v-app[id^='v-discussions'] .v-button-caption:contains('Add')")
But when I attempt to use it in Selenium, it throws an error:
Caused by: org.openqa.selenium.InvalidSelectorException: The provided selector div.v-app[id^='v-discussions'] .v-button-caption:contains('Add') is either invalid or does not point to a WebElement. The following error occurred:
InvalidSelectorError: An invalid or illegal selector was specified
I also tried the same string with querySelector, and it resulted in an "Illegal string" error:
(2) document.querySelectorAll("div.v-app[id^='v-discussions'] .v-button-caption:contains('Add')")
Why do you think this might be happening?
P.S.
This is how each element looks like:
<span class="v-button-caption">Add Comment</span>