When writing E2E tests using Selenium, I sometimes encounter pseudo-elements (:: before or :: after) and have trouble.
The trouble is that these pseudo-elements are ** pseudo-** elements used in CSS and cannot be tampered with directly from Selenium's web driver. In other words, even if you want to click, you cannot click the pseudo element directly. (The code below is Selenide.)
Try to click on a pseudo element
$("button::before").click(); //I can't click!
Then, the way to click is to click the element including the pseudo element.
Attempts to click on an element that contains a pseudo-element
$("button").click();
Hopefully this works, but it fails because the elements containing the pseudo-elements are invisible in the past. In such a case, it can't be helped, but there is no choice but to specify the location on the browser in ad hoc and click as follows.
Click the element that contains the pseudo element
Actions actions = new Actions(WebDriverRunner.getWebDriver());
actions.click($("button")).build().perform();
//People who want to move the place even more finely
actions.moveToElement($("button"), xOffset, yOffset).click().build().perform();
https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-elements https://stackoverflow.com/questions/45427223/click-on-pseudo-element-using-selenium https://www.quora.com/How-do-I-locate-After-and-Before-css-tag-in-selenium-webdriver
Recommended Posts