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

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.

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 :(

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.

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

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.

Related

Click on first element contained in a div

I have a div that contains a set of dynamic elements. I want to click on the first search result.
I want to click on the first element contains in
I tried using creating a custom xPath like so but it didn't work. Any ideas here?
//div[1][contains(text(), 'listing')]
First of all It would've helped if you had provided more information.
best will be using pseudo-child like div.firstChild or if the elements are generated dynamically you can add a class and use document.querySelectorAll(".class") which will give you an array of elements that had the class.
You can use array[0] to use click on the first element.
For anyone coming across this thread here is the solution
const listings = await page.$x('//*[contains(#id,"listing_")]')

How can I check that a dropdown field is disabled using selenium?

I am trying to write a function in selenium to check if a Reasons dropdown is showing as disabled, but can't quite get the xpath right. The code for the dropdown is in the pic, the function I'm working on is the second one (InputDisabled), having based it on the working first one (SearchDisabled):
` public By SearchDisabled(string searchId) => By.XPath($"//div[#id='{searchId}']//div[contains(#class, 'v-input--is-disabled')]");
public By InputDisabled(string inputId) => By.XPath($"//div[#id='{inputId}']//div[contains(#class, 'v-input--is-disabled')]");`
The inputId going into it is 'ai-confirm-allergy-modal-reason'. I've tried it as 'input[contains...' and 'contains(#disabled, 'disabled'...' among other things, but my xpath knowledge isn't great yet!
dropdown code
Use below code
String value = driver.findElement(By.XPath("//input[contains(#id, 'ai-confirm-allergy')]").getAttribute("disabled");
Assert.AssertEquals(value, "disabled");
I do not quite get your question.
well if you are trying to use xpath to locate an element, you can just use the id; assuming that it is unique.so:
driver.findElement(By.xpath("//input[contains(#id, 'ai-confirm-allergy')]")
should locate the webelement.
However, your xpath for the SearchDisabled is locating a div containing class 'v-input--is-disabled' with in another div with id of '{searchId}';
the same logic goes for the next one. your xpath is trying to locate a div containing class 'v-input--is-disabled' which is located with in another div located using input id. I don't think this combination can locate the element highlighted in the picture.

selenium python how to find and click element that change everytime

im trying to find an element with dinamic values , for example <span class="ms-Button-label label-175" id="id__177">Save</span> in inspect element, the id and class values tend to change for every refresh, how can i in this case find the element in selenium? i tried troguht xpath but seems doesnt work because can not find the path, i was thinking to find "Save" world torught always find by xpath but actually i dont know if im doing well : driver.find_element_by_xpath(//span(#.... but then? how can insert element if it changes everytime? thanks!
Something like this may work:
driver.find_element_by_xpath('//span[text()="Save"]')
But this will fail, if there is more than one button with text "Save" on the page.
In that case you may try to find some specific outer element (div, form, etc.) which does not change and contains the button. Then find the button inside of it.
With few requests with driver:
specific_div = driver.find_element_by_id("my_specific_div")
button = specific_div.find_element_by_tag_name("span") # e.g. there is only one span in that div
Or with more specific xpath:
button = driver.find_element_by_xpath('//div[#class="some-specific-class"]/span[text()="Save"]')
If needed, search for more nested elements before the button, so you can get more narrow search field.
More examples in the docs.

How to get the clicked element in selenium when we don't know what are we clicking

I am clicking with the help of following lione oc code->
actions.moveToElement(objDriver.findElement(By.id("id_popcode")),coordinates.getX(),coordinates1.getY()-1).doubleClick().build().perform();
Basically i double click at a position(x,y) in our application. Individually we cannot click that particular element bcoz it has to be clicked at particular (x,y) itself. So i want to get the properties of that clicked element(which i click using actions command which i mentioned above) liked id, classname. Can some one help me with this...kinda stuck here..........
edit:
try execute.elementFromPoint() with JavascriptExecutor to get element by coordinates
JavascriptExecutor js = (JavascriptExecutor)driver;
WebElement theElement = (WebElement)js.executeScript("return document.elementFromPoint(arguments[0], arguments[1])", coordinates.getX(), coordinates1.getY()-1);
System.out.println(theElement.getAttribute("tagName"));
System.out.println(theElement.getAttribute("class"));
old:
you are using negative value in getY()-1 which mean coordinates above the element, it maybe the parent or preceding-sibling of element try to select it using xpath
WebElement popcodeBefore = objDriver.findElement(By.xpath("//*[#id='id_popcode']/parent::*"));
// Or
// WebElement popcodeBefore = objDriver.findElement(By.xpath("//*[#id='id_popcode']/preceding-sibling::*"));
System.out.println(popcodeBefore.getAttribute("class"));
actions.moveToElement(popcodeBefore).doubleClick().build().perform();
If you have any specific text at that particular coordinates make use of it. I too had the same issue like this where I need to double click on a cell which had text 0.00%. I have done hovering action first using the text and then performed the double-click
Ignore the syntax issues since I am working on the protractor these days
browser.driver.actions().mouseMove(driver.findElement(by.xpath("//*[text()='00')]").build().perform();
and then perform the click
Still, you have issues, check if you have any attribute like ng-click which can be helpful to get the coordinates for that particular location. please always share the HTML code so that It may help us to check more deeply

selenium getXpathCount

HI there
selenium.getXpathCount does not find element, any one hoas any idea ? Here is my code:
if (existArtist){
int result = selenium.getXpathCount("//*[#id='chugger-results']/div[1]/ul/li").intValue();
if (result>0){
//DO THIS
Either you have a broken DOM (Do a W3C Validation and see if you have any unclosed tags) or your XPath is looking for an element that doesn't exist.
We would need to see the entire HTML of the page to be able to answer your question (more visibility of your test code would be useful too)