I'm using cypress test runner and its selector playground.
When I click radio button the value changes to false. Via selector playground I can't pick the right selector. I get the error shown in the picture.
<label _ngcontent-qla-c109="">
<input _ngcontent-qla-c109="" type="radio" class="native-input visually-hidden" name="redraw" value="false">
<span _ngcontent-qla-c109="" class="outer-circle"></span>
<span _ngcontent-qla-c109="" class="inner-circle"></span>
<span _ngcontent-qla-c109="" class="text">No</span>
</label>
Many thanks in advance for any hints,
Robert
I've also tried
cy.get(':nth-child(8) > :nth-child(1) > :nth-child(1) > .col-9 > .radio-toolbar > :nth-child(2) > label > .native-input visually-hidden')
.should('have.value','false')
The selector you used from the selector-playground is very brittle and prone to breaking. I really recommend to use data-testid for the interactive elements:
https://docs.cypress.io/guides/references/best-practices#Selecting-Elements
Without a data-testid, i suggest you find the container element and chain this with the contains 'No' value.
I don't know the exact DOM structure but it can be something like:
cy.contains('Redraw')
.parent()
.contains('No')
.should('have.value', 'false')
You can use .contains as well with Text. Since in your screenshot I can see multiple NO, you can get the first one by using eq(0).
cy.contains('No').eq(0).should('have.value', 'false')
Related
How to select Actions Button followed by the Div class containing known Text ( for example, card_header-title"Addresses" in this case) in Robot Test Framework?
The page contains several span table sections and each of them has its own actions and show-history buttons. To select the specific Actions button, I could use its xpath, but I am trying to access all sections in a for loop and the xpath of actions button in one section changes from the other, so hard coding is not an option for me. Would someone please help.
<div class="attribute-group-header card__header">
<h3 class="attribute-group-title card__header-title">Addresses</h3>
<div class="floatright">
<input type="button" class="action small btn" value="Actions">
<input type="button" class="showHistory action small btn" value="ShowHistory">
</div>
</div>
I know you say you don't want to use Xpaths but maybe one of these examples could help. I don't see any other way of achieving what you're asking for other than having id's supplied on the buttons.
You could use an xpath locator that first finds the text of the "attribute-group-title card__header-title" element and then selects the following sibling div, followed by the input:
//*[contains(text(),'Addresses')]/following-sibling::div[1]//input[#value='Actions']
Is there some sort of state(like :hover, :focus, :active) for when typing in an input field only using CSS or does this have to be done in another way like JavaScript?
What I want to achieve is to only display a character counter when someone is typing.
There is no state in css when typing in an input field.
Please see the link for more info about pseudo classes
https://www.w3schools.com/css/css_pseudo_classes.asp
The state for input when typing is possible in javascript.
Please see the code below.
document.getElementById("demo").addEventListener("keypress", myFunction);
function myFunction() {
alert("Someone is typing");
}
<input type="text" id="demo">
You can see more info about onkeypress in this link
https://www.w3schools.com/jsref/event_onkeypress.asp
Hope this helps.
I am trying to click a button/element on a popup window using Selenium2Library in Robotframework:
Click Element name=OK
But I get the following error in Robotframework:
ValueError: Element locator 'name=OK' did not match any elements.
I Believe this is happening due to an ui-widget-overlay that does not disappear. Below are snippets from the html code, containing the Ok button and the ui-widget-overlay:
<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">OK</span></button>
<div class="ui-widget-overlay" style="width: 1793px; height: 620px; z-index: 1005;"></div>
I know that I can successfully click element using xpath, but the xpath is dynamic in this case and I want to use a fixed value. Also, "Click Button" keyword did not work either.
Please let me know how I can go about this.
Have you tried looking at the class attribute of the button? To me it sounds like that might provide a more stable xpath or css reference. For example //button[contains(#class, 'ui-button')]
You've misinterpreted the text of the button (OK) to be itsname attribute. An attribute is part of the XML/HTML tag, e.g. it should have been something like:
<button class="some values" name"OK">
, which it's not in the sample.
As you are looking for the particular button by it's visible text, this xpath locator would match it:
xpath=//button[span[#class="ui-button-text" and text()="OK"]]
The expression reads "match a button element having as a direct child a span with that class and text"
I'm using the following in some selenium code:
WaitForElement(By.CssSelector("#document-count:contains(<number greater than 0>)"));
Specifying the number greater than 0 is where I'm stuck. Is there any way to use only css to check and see if an element's innertext has something other than 0?
:contains was deprecated in CSS3. Since WebDriver ties directly into the browser, it's unable to use that pseudo-class.
Is there any way to use only css to check and see if an element's innertext has something other than 0?
Unfortunately not. CSS really screwed Selenium users over with their deprecation of both :contains and :nth
As Arran said, you can use xpath, or - if you are willing to experiment with C# and CSS together (not just css as you state) then you can come up with something to loop x amount of times checking the text.
Per Chris Coyier at CSS Tricks:
Deprecated
:contains() - As far as I know, this is gone. The current
CSS3 spec has removed it. I don't know the story, let me know if you
do. At a glance, it looks ridiculously useful (being able to select
objects based on the textual content they contain). It may be because
of problems, or having content in selectors being undesirable. My
preference would be to have it select by elements rather than text,
like p:contains(img), but alas, no such luck.
That said, if you were to set the value properties, you may be able to use :not([value="0"]):
See jsFiddle demo
HTML
<div id="doc">
<input type="text" value="0" />
<br />
<input type="text" value="1" />
<br />
<input type="text" value="2" />
</div>
CSS
#doc input[value="0"]
{
background: red;
}
#doc input:not([value="0"])
{
background: green;
}
Result
I have this code that should show and hide element outputs according to specific checkboxes.
The output that I´ve got is that each checkbox, when clicked, shows more outputs than it should.
How can they be targeted using specific css IDs?
I mean, whan you click on each box, it should only appear the text that´s referencin that specific box, and not all of them.
Thanks for your insight!!
Rosamunda
DEMO
/*styled relative to the label*/
label {display:block;}
label ~ div {display:none; margin-left:1em;}
/*targetting*/
/*boxes with id having this number will style a sibling div with this number*/
input[type="checkbox"][id*="131"]:checked ~ div[class*="131"] {display:inline;}
input[type="checkbox"][id*="134"]:checked ~ div[class*="134"] {display:inline;}
input[type="checkbox"][id*="130"]:checked ~ div[class*="130"] {display:inline;}
You can use the contains *= selector. I'm not sure what browser compatibility it has, but it works for me in Chrome. For instance changing the CSS for the first of the three checkboxes looks like this:
input[id*="131"]:checked ~ div[class="tipo-uf-131"] {display:inline;}
This is close to a perfect example of overthinking things and relying too heavily on CSS. Stylesheets are supposed to be in charge of presentation not functionality. CSS selectors can be complex enough that you could use it for validation checks - does not make it a good idea though :)
You're much better off relying on javascript to accomplish this and would end up with a significantly wider browser support matrix. Change your markup a bit:
<label>Box 1:</label> <input class="form-checkbox" id="cb131" type="checkbox"/>
...<input class="form-checkbox" id="cb134" type="checkbox"/>
...<input class="form-checkbox" id="cb130" type="checkbox"/>
<div id="cb131-linked"><b>Box 1 is checked.</b></div>
<div id="cb134-linked">...</div>
<div id="cb130-linked">...</div>
...and you can add a jQuery listener so that when the state of a checkbox is toggled, you can show the related divs like so:
$checkboxes = $(".form-checkbox");
$checkboxes.change(function(){
console.log("changed");
$checkboxes.each(function(){
$this = $(this)
$("#"+$this.attr("id")+"-linked").toggle($this.is(":checked"));
});
});
Fiddle: http://jsfiddle.net/9t59j/11/
Also, inputs are supposed to be self-closing elements.