Click on pseudo element using Selenium

Question

I am trying to use Selenium to click on a ::after pseudo element. I realize that this cannot be done through the WebDriver directly, but cannot seem to figure out a way to d

Answer 1

Im going to provide an alternative that may work for some scenarios, at least it did the trick for me, and is relatively easy to implement in any language using selenium via a JS script.

In my scenario there was an ::after pseudoelement containing the functionality of a button. This button was contained in a position relative to another element under it.

So I did the following:

1. Get the element that I can, in this question scenario would be that span.
2. Get the coordinates of the element.
3. Calculate the coordinates realtive to that element of the pseudoelement you want to click.
4. Click on those coordinates.

This is my code using perl, but I'm sure you can do the same in any language:

my $script="
function click_function(x, y)
{
    console.log('Clicking: ' + x + ' ' + y);

    var ev = new MouseEvent('click', {
        'view': window,
        'bubbles': true,
        'cancelable': true,
        'screenX': x,
        'screenY': y
    });

    var el = document.elementFromPoint(x, y);

    el.dispatchEvent(ev);
}

var element = document.getElementById('here_put_your_id'); //replace elementId with your element's Id.
var rect = element.getBoundingClientRect();
var elementLeft,elementTop; //x and y
var scrollTop = document.documentElement.scrollTop?
               document.documentElement.scrollTop:document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft?            

    document.documentElement.scrollLeft:document.body.scrollLeft;
elementTop = rect.top+scrollTop;
elementLeft = rect.left+scrollLeft;
console.log('Coordiantes: ' + elementLeft + ' ' + elementTop)

click_function(elementLeft*1.88, elementTop*1.045) // here put yor relative coordiantes
    ";
    $driver->execute_script($script);

Answer 2

I've encounter the same problem while writing Selenium tests for Salesforce and managed to solve it by direct control over mouse using Actions.

Wrapper table for this button has hardcoded width of 250px, and you have spotted that. To locate where the mouse is, you can use contextClick() method instead of Click(). It simulates right mouse button so it will always open browser menu.

If you do:

Actions build = new Actions(Session.Driver);
build.MoveToElement(FindElement(By.Id("ext-gen33"))).ContextClick().Build().Perform();

you will spot that mouse moves to the middle of the WebElement, not the top left corner (I thought that it does too). Since that element width is constant, we can move mouse just by 250 / 2 - 1 to the right and it will work :) code:

Actions build = new Actions(Session.Driver);
build.MoveToElement(FindElement(By.Id("ext-gen33"))).MoveByOffset(124, 0).Click().Build().Perform();

Answer 3

For those who are trying to do this in Python, the solution is below:

elem= driver.<INSERT THE PATH TO ELEMENT HERE> ActionChains(driver).move_to_element_with_offset(elem,249,1).click().perform()

Basically here I'm finding my element in the DOM and assigning to a WebElement. The WebElement is then passed the method move_to_element_with_offset as a param.

I got the px values for the element from developer tools.

PS: use this import- from selenium.webdriver.common.action_chains import ActionChains

You can read more about Action chain class and its method move_to_element_with_offset here: http://selenium-python.readthedocs.io/api.html.

Hope this helps.

Answer 4

Maciej'a answer above worked with WebDriver, but not with the RemoteWebDriver (Selenium 3.12.0) against Firefox V.56. We needed a solution that worked for both local and remote. Ended up using keyboard shortcuts to invoke the Navigation Menu drop down. As an added benefit, this also removes the need to use offsets.

String navigationMenuDropdownShortcutKeys = Keys.chord(Keys.ESCAPE, "v");

new Actions(driver)
 .sendKeys(navigationMenuDropdownShortcutKeys)
 .perform();