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')
Related
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'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
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 ()
I am making a form in a Vue component and would like to set the HTML attribute required to an input field based on the value I am having in an object property.
So, for the example, an object that has fields like this:
label:"Name"
required:"1"
type:"textbox"
I need to a set the field to have required attribute in an input tag:
<input class="input is-large" :type="input.type" required>
And for the ones that don't have 1 as a value for that field I don't want a required attribute.
How can I do that in Vue?
You can do it like this:
<input class="input is-large" :type="input.type" :required="obj.required == 1">
Since your object's required property has 1 as a string not number I used == for comparison so that equality is tested after coercion
I have input with autocomplete.
<input type="text" class="form-control input-sm isFieldValueEmpty tooltip"
style="width:779px;" id="searchK" name="keywords" value=''>
Everything works good, but I set value of autocomplete and after that add value from autocomplete to hidden input (user can choose many value from autocomplete). But when I add this value and try to set empty value of autocomplete input:
$("#searchK").attr("value","");
In input field still have text, but value od this input is empty (checking by firebug).
Any idea how delete this text?
I found solution
$(this).val('');
return false;
And input is clear.
Don't use attr() to change the value, use val()
$("#searchK").val("");