Archief van
Categorie: Selenium WebDriver

WebDriver won’t click the checkbox in Chrome Headless, now what?

WebDriver won’t click the checkbox in Chrome Headless, now what?

Chrome headless, love it! And usually it works like a charm, but this week we ran into a problem with the checkbox not being clicked in our headless runs. Tried every wait strategy I could think of but waiting was not the issue (for once šŸ™‚ )

Tried to go the set attribute route but nope. No succes. Some kind of React mumbo jumbo going on.

The culprit!

 

Did some digging on the interwebs and found out other people are having this issue as well. Might even be a Chrome headless issue with nog fix being on the horizon. So only one thing left to do: Straight JS injection!

 

// React checkbox not clickable headless, direct JS injection required
browser.execute(function() {
    let elements = document.getElementsByClassName("checkbox__input");
    elements.item(0).click();
});

Luckly WebDriverIO lets you execute JS commands with the .execute command. Above I went the ByClassName route which returns a list with elements found but you can also go the ById route

// React checkbox not clickable headless, direct JS injection required
browser.execute(function() {
    document.getElementById("checkbox__input").click();
});

With the straight JS injection, the checkbox gets clicked, headless and in regular mode (with head?)

Please follow and like us:
PageFactory depricated, now what??

PageFactory depricated, now what??

So one of the latest Selenium WebDriver releases depricated the PageFactory in C#. This kind of forces us to rethink our POM strategy. As somebody how has being doing the POM setup the same way for a few year now I really like this!

The “old” way:

@FindBy(css = "div[data-testid='theme']")
    private WebElement themePageButton;

public EditionPage(WebDriver driver){
    this.driver = driver;
    PageFactory.initElements(driver, this);
}

Calling the element in a method:

themePageButton.click();

So how do we still declare the element as a global variable with out using the FindBy annotation?

By to the rescue!

By themePageButtonLocator = By.cssSelector("div[data-testid='theme']");

public EditionPage(WebDriver driver){
    this.driver = driver;
}

We removed the PageFactory, the annotation and declared the By locator as a global By. We can now call the element in a method by using the By locator:

driver.findElement(themePageButtonLocator).click();

PageFactory.initElements() is gone, mission accomplished!

Please follow and like us: