How to check input span styled as checkbox is selected using Selenium? Only :: after as the difference between states

Question

I am trying to check whether a checkbox is selected. My checkbox is styled using input and span, not using the checkbox tag. As it's not a default checkbox I can't use methods such as isSelected or isChecked to check its state. I was then trying to check if any class belongs to a state but not the other. However, the only difference I've found so far is that when the element is selected an ::after appears but not sure how to go about checking this?

I found a tutorial with a similar issue, but don't know much about Javascript and not sure how to adapt it to my case.

https://www.quora.com/How-do-I-locate-After-and-Before-css-tag-in-selenium-webdriver

Before clicked

After clicked

That's what is being used and as per @pguardiario answer

 System.out.println(js.executeScript("return window.getComputedStyle(document.querySelector('.custom-checkmark'), ':after').getPropertyValue('content')"));

But both when it's selected or not it returns the same output (empty string)

UPDATE

Found the difference between the selected and unselected states. The .custom-checkmark:after style has display-none when the checkbox is not selected. Not sure still how to use this info as that's what I have at moment and they return display none both before and after the checkbox is clicked.

@Test
public void testingCheckbox() {

    JavascriptExecutor js = (JavascriptExecutor) wd;

    System.out.println(js.executeScript("return window.getComputedStyle(document.querySelector('.custom-checkmark'), ':after').getPropertyValue('display')"));

    lp.clickCheckBox();

    System.out.println(js.executeScript("return window.getComputedStyle(document.querySelector('.custom-checkmark'), ':after').getPropertyValue('display')")); 
}

NEW FINDING

It seems there's actually 'two checkboxes'. One with the span tag and the other one with the span. They appear together when unselecting some attributes.

Thanks for the help.

@Frian, sorry not sure I can provide the url as it's my company's web application and would need approval from them. — Francislainy Campos, Aug 19 '19 at 05:57
Hi @pguardiario, I've made an update to my post with the difference between the states. Would that help you be able to guide me on locating the element please? — Francislainy Campos, Aug 19 '19 at 09:51

dhulipala murali · Answer 1 · 2019-08-20T13:56:05.090

1

Try the below CSS selectors for identifying that

span.custom-checkmark:after

And also please see the below link for more details Extracting content in :after using XPath

edited Aug 20 '19 at 13:56

answered Aug 19 '19 at 05:23

dhulipala murali

183
10

Hi @user3263086, thanks for the reply. I'm afraid I tried it but it didn't work. It gives me an empty string instead when looking for the innerHTML. Tried also with the outer but it made no difference in comparison to when it's not clicked. – Francislainy Campos Aug 19 '19 at 05:55
@FrancislainyCampos Please see my updated answer.it might help you. – dhulipala murali Aug 20 '19 at 13:58
Thanks very much. Sorry, it's actually working already now just can't accept the answer yet. – Francislainy Campos Aug 20 '19 at 14:57

pguardiario · Answer 2 · 2019-08-19T06:16:00.127

1

I can't test it but it should look something like this:

driver.executeScript('return window.getComputedStyle(document.querySelector(".custom-checkmark"), ":after").getPropertyValue("content")')

Sorry about the long line btw, Java doesn't have heredocs which makes this painful :(

edited Aug 19 '19 at 06:16

answered Aug 19 '19 at 06:09

pguardiario

53,827
19
119
159

Thanks @pguardiario. Unfortunately it didn't work as it returns empty spaces as the content. – Francislainy Campos Aug 19 '19 at 08:30
Here I made a [fiddle](https://jsfiddle.net/0d9tup1k/3/) so you can try it. If there's 2 checkboxes you might need to adjust the css, – pguardiario Aug 20 '19 at 00:05
Many thanks for the fiddle. Had never heard of it before but seems interesting. Learned sth new now. :) – Francislainy Campos Aug 20 '19 at 07:29

score 1 · Answer 3 · answered Aug 19 '19 at 06:25

Try use JavascriptExecutor, import them :

import org.openqa.selenium.JavascriptExecutor;

Try this :

WebElement chk = driver.findElement(By.xpath("//*[@class='custom-checkmark' and ./preceding-sibling::*[@id='terms_checkbox']]"));//or you have
String getPro;
getPro = ((JavascriptExecutor)driver).executeScript("return window.getComputedStyle(arguments[0], ':after').getPropertyValue('background-color');",chk).toString();
System.out.println(getPro);
chk.click();
Thread.sleep(1000);
getPro = ((JavascriptExecutor)driver).executeScript("return window.getComputedStyle(arguments[0], ':after').getPropertyValue('background-color');",chk).toString();
System.out.println(getPro);

Not sure with .getPropertyValue('background-color'), but this may be a clue.

Hi @Frian, thanks for the answer. I've updated my question with the JS code I'm using at the moment, targeting the display property instead but not working as it returns none on both cases even when the tick selected is displayed. — Francislainy Campos, Aug 19 '19 at 10:31

score 1 · Accepted Answer · answered Aug 20 '19 at 14:54

1

Got the code to work. Targeting the input tag instead of span solved the problem. I had a mistake on my code when tried that first time so that's why though the isSelected field wasn't working and moved on to target the span tag instead which opened this thread here. Sorry about that and thanks for everybody's help.

answered Aug 20 '19 at 14:54

Francislainy Campos

3,462
4
33
81

1

Thanks, I went through all the other answers before finally getting to this one... – Ory Zaidenvorm Oct 14 '20 at 05:52

How to check input span styled as checkbox is selected using Selenium? Only :: after as the difference between states

4 Answers4