Click on an element within ::after

Question

• Website Link: http://realestate.hommelle.com/
• Username: sunil
• password: sunil@123

After login to the site in the top right of the screen there is an element(down arrow) in the web page which will expand after clicking on it. But when I am inspecting the element I can see it is in ::after. I have searched in Google and come to know it is a "pseudo element". I have tried like below:

@FindBy(xpath="//div[@class='user-name']")
    private WebElement downArrow;

public void clickOnDownArrow() {
    Actions action = new Actions(driver);
    action.moveToElement(this.downArrow).moveByOffset(124, 0).click().build().perform();
}

But I am not able to locate the element and hence could not click on it. Please help me on this. I have given the website URL and credentials as well.

Answer 1

You can refer this question on Stack Overflow. You need to identify valid offset then only it work

Use below code its working at my end :

Actions build = new Actions(driver);
build.moveToElement(driver.findElement(By.cssSelector("div.user-name"))).moveByOffset(50, 0).click().build().perform();

In your code it should be :

@FindBy(xpath="//div[@class='user-name']")
    private WebElement downArrow;

public void clickOnDownArrow() {
    Actions action = new Actions(driver);
    action.moveToElement(this.downArrow).moveByOffset(50, 0).click().build().perform();
}

Answer 2

You should simply click on that div you have already found by //div[@class='user-name']. ::after is actually inside that div and when you click on it, you actually click on the div itself. So I think this should work for you:

@FindBy(xpath="//div[@class='user-name']")
private WebElement downArrow;

public void clickOnDownArrow() {
    this.downArrow.click();
}

From your browser console you can try it as well. Type in:

$x("//div[@class='user-name']")

it will return an array, representing the div, right-click on the little rectengular icon next-to it and select store in a global variable or something like that (my browser's language is not English unfortunately). It should be the first option. Then you can call the click() function on this variable, and check that the menu is actually showing up.