I'm using TestCafe and would like to determine if the checkbox element is present or not. In the HTML element, if the checkbox is already checked then the attribute checked exists otherwise not. How do I determine using TestCafe?
I used the function available in TestCafe - .hasAttribute('checked') but the return is undefined.
Here is the HTML code when the checkbox is checked:
<input class="jss1523" tabindex="-1" type="checkbox" data-indeterminate="false" value checked>
Here is the HTML code when the checkbox is unchecked:
<input class="jss1523" tabindex="-1" type="checkbox" data-indeterminate="false" value>
How do I solve this using TestCafe?
For every Dom element which you get with Selector() you can check property checked - https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/dom-node-state.html#members-specific-to-element-nodes
For checkboxes and radio inputs it returns Boolean value (true - if checked, otherwise - false) and for other types of elements return undefined
Related
This is a dropdown and by default value is "False".
The dropdown value changes in hidden input tag only after selecting true.
<div class="dx-dropdowneditor-input-wrapper dx-selectbox-container" xpath="1">
<input type="hidden" value="False">.
How do I assert this element should contain "False" by default
cy.get('.dx-dropdowneditor-input-wrapper.dx-selectbox-container')
.should('have.value','False')
But it is not accessing this value.
Expecting to be able to assert that by default the value is "False".
You would need to add the input element tag into the selector
cy.get('.dx-dropdowneditor-input-wrapper.dx-selectbox-container input')
.should('have.value','False')
or "find" the input like this
cy.get('.dx-dropdowneditor-input-wrapper.dx-selectbox-container')
.find('input[type="hidden"]')
.should('have.value','False')
Following code is used to get text of specified button element with id:
EE__printer-menu__activator
In our structure it's drop-down and here is element with child elements DOM structure:
<button data-v-12817ac3="" type="button" class="some classes" id="EE__printer-menu__activator"><div class="v-btn__content">
Printer
<i data-v-12817ac3="" aria-hidden="true" class="some classes">arrow_drop_down</i>
</div>
</button>
The problem is following: when drop-down is not expanded and I'm trying to get text of id="EE__printer-menu__activator" element using getText() I receive :
{Printer
arrow_drop_down}
which is expected. but when drop-down is expanded and I'm using the same I get only text of first child:
{Printer}
Can't understand why in this case getText() doesn't return "arrow_drop_down" text of the last child of selected element.
When drop down is not extended then if you pay attention
<i data-v-12817ac3="" aria-hidden="true" class="some classes">arrow_drop_down</i>
to more particular attribute aria-hidden is set to true. so when you are calling .getText on EE__printer-menu__activator, you are getting both the text.
Now, here is a bit assumption that when drop down is expanded, then aria-hidden value will be set to false. causing .getText() to return what it has, and it does have only first Printer.
i would like to assert whether a particular text box is disabled or enabled. below is the HTML for it. the difference between the disabled and enabled text box is only By disabled Attribute towards the end.
disabled text box HTML:
<input controlid="txtIPAddress" class="textfield form-control servicefield invItem_dynamic_validation valid" id="OrderProperties_4__Value" isdisabled="true" name="OrderProperties[4].Value" style="display:" type="text" value="" disabled="">
enagled text box HTML-
<input controlid="txtIPAddress" class="textfield form-control servicefield invItem_dynamic_validation valid" id="OrderProperties_4__Value" isdisabled="true" name="OrderProperties[4].Value" style="display:" type="text" value="">
I tried element.isEnabled() and element.isEnabled() methods to no avail.
any help much appreciated!
isEnabled()
As per the documentation isEnabled() method is defined as:
boolean isEnabled()
Description:
Is the element currently enabled or not? This will generally return true for everything but disabled input elements.
Returns:
True if the element is enabled, false otherwise.
So your code trial as element.isEnabled() was perfect to retrieve the status whether the element was enabled or not provided the element uniquely identified the node which you have provided within the question.
Alternative
As an alternative you can try to validate if the elelemt is present without the attribute disabled using the following solution:
try {
driver.findElement(By.xpath("//input[#class='textfield form-control servicefield invItem_dynamic_validation valid' and not(disabled)][#controlid='txtIPAddress']"));
System.out.println("Element is enabled");
} catch (NoSuchElementException e) {
System.out.println("Element is not enabled");
}
To Assert Text box editable, we can use isEnabled() function.
See below sample,
boolean anytextfield = driver.findElement(By.xpath("respectivexpath")).isEnabled();
Assert.assertEquals(anytextfield,true);
M unable to validate checkbox, if it's selected or not
because both the HTML are same
I tried isSelected(), but it's not working
Below is the HTML code for both selected and unselected
1) Selected
<label class="c-account-access-panel__checkbox " for="23336" data-js-checkbox-label="">
<input id="23336" class="c-account-access-panel__checkbox-input" type="checkbox"
data-label-for-value-missing="Please select at least one account from the options below" data-form-field-validation-on-grid=""
required="" checked="" data-js-checkbox="" value="DE29973399" name="payer"/>
<div class="c-account-access-panel__checkbox-symbol"/>
2) Unselected
<label class="c-account-access-panel__checkbox " for="23336" data-js-checkbox-label="">
<input id="23336" class="c-account-access-panel__checkbox-input" type="checkbox"
data-label-for-value-missing="Please select at least one account from the options below" data-form-field-validation-on-grid=""
required="" checked="" data-js-checkbox="" value="DE29973399" name="payer"/>
<div class="c-account-access-panel__checkbox-symbol"/>
Thanks in advance!
As per the Java Docs isSelected() method determines whether the element is selected or not. This operation only applies to <input> elements such as checkboxes, options within a <select> tag and radio buttons.
To validate if the desired checkbox is selected or not you can use the following code block:
boolean checkboxSelected = driver.findElement(By.xpath("//input[#class='c-account-access-panel__checkbox-input' and #name='payer']")).isSelected();
If isSelected() is not working for you. Then , you can use JavascriptExecutor to do your task. Following JS statements shall let you know the state of target checkbox.
document.getElementById("23336").click();
document.getElementById("23336").checked;
The checked method returns true or false depending on the checkbox state.
You can validate using getAttributemethod.
First select the webElement using any of the unique locator,
WebElement checkbox=driver.findElement(By.xpath(".//input[#type='checkbox']"));
If the checkbox is selected, then checkbox.getAttribute("checked")will give the result as true else, it will give the result as null. So, you can add the condition using checkbox.getAttribute("checked")
Use xpath expression like: (//div [#id='23336')[1] or (//div [#id='23336')[2] to make them into unique element then do .isselected ()
here is my html markup:
<input type="checkbox" checked="false">
I have set the checked to false, but the result is still checked
Why this happened? If I remove the checked property, it would turn unchecked.
Actually I want insert a input[type=checkbox] into html markup in dynamic, with parameter to determine checked or not
If you specify checked, then it is checked; it doesn't matter if you say checked="false", checked="true", checked="checked" or just plain checked.
If you don't want it checked, then do not include the checked attribute.
<input type="checkbox" />
See: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_input_checked