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:

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *