cy.get('.pass-input-placeholder > .input-wrapper > .error-msg > .msg-body > span')
.should('contain', 'Invalid password');
Why are the classes separated with ">"? Does it apply only for classes?
It means select "the immediate child". It applies for classes, tags, ids, attributes, anything.
So .pass-input-placeholder > .input-wrapper would find this
<div class="pass-input-placeholder">
<div class="input-wrapper">
but not this
<div class="pass-input-placeholder">
<div>
<div class="input-wrapper">
But without > the second HTML will be found as well.
cy.get('.pass-input-placeholder .input-wrapper') // finds any descendent
Related
I want to find element div with class=parent-class whose three children should have same class=no-data using xpath or css selector.
i.e all three > 3rd, 4th & 5th child div of parent class should have 'no-data' class.
example:
<div class="main">
<div class="parent-class">
<div class="child-1">child1</div>
<div class="child-2">child2</div>
<div class="no-data">NA</div>
<div class="data">xyz</div>
<div class="data">ijk</div>
</div>
<div class="parent-class">
<div class="child-1">child1</div>
<div class="child-2">child2</div>
<div class="no-data">NA</div>
<div class="no-data">NA</div>
<div class="no-data">NA</div>
</div>
<div class="parent-class">
<div class="child-1">child1</div>
<div class="child-2">child2</div>
<div class="data">abc</div>
<div class="data">xyz</div>
<div class="data">ijk</div>
</div>
<div class="parent-class">
<div class="child-1">child1</div>
<div class="child-2">child2</div>
<div class="no-data">NA</div>
<div class="no-data">NA</div>
<div class="data">ijk</div>
</div>
</div>
Tried below solution: it works for me
//div[contains(#class,'parent-class') and div[#class='no-data'][1] and div[#class='no-data'][2] and div[#class='no-data'][3]]
or
//div[contains(#class,'parent-class') and (div[#class='no-data'][1] and div[#class='no-data'][2] and div[#class='no-data'][3])]
Though looking for some better solution
You can use below given xpath to trace your required elements.
//div[#class='main']//child::div[2]//
child::div[#class='no-data'][1]
//div[#class='main']//child::div[2]//
child::div[#class='no-data'][2]
//div[#class='main']//child::div[2]//
child::div[#class='no-data'][3]
I think this should do it:
//div[#class='parent-class'][not(div[(position()>2 and position()<6) and .[#class != 'no-data']])]
As far as I understood your requirement it should be something like:
//div[#class='parent-class' and count(descendant::div[#class='no-data'])=3]
where:
descendant - is XPath Axis returning children of the current node and their children
count() - is XPath Function returning the number of nodes matching the expression
Therefore above expression will match div tag having 3 children with no-data class
here iam trying to render four options for a question from one file but i need to make 2 options appear in one row and next two options in another row while iterating over the options iam not able to figure it out how to do it . here is my code.
`
{
data.options.map(option => (
<div>
<input type='radio' name='option' value={option.text} />
<div>
<span>{option.text}</span>
</div>
</div>
)
)
}
`
You could add a class to your div wrapper to make it float, and surround that div to include an element that clears the float every two options.
You can check a working example on this fiddle.
This could be one of the approach.
Wrap the map in a function.
this.fetchOptions =(options) =>
options.map(option => (
<div>
<input type='radio' name='option' value={option.text} />
<div>
<span>{option.text}</span>
</div>
</div>
)
)
Call the method two times passing the data as below.
render(){
<div>
<div className="Row">{this.fetchOptions(data.options.slice(0,2))}</div>
<div className="Row">{this.fetchOptions(data.options.slice(2,4))}</div>
</div>
}
Now that DOM is wrapped with two div, appropriate class can be applied.
Hope it helps :)
In my react classes, I often find myself having to use conditional logic to decide what to render. The problem with such an approach is that it leads to a lot of redundant markup. Here is an example:
if(this.props.quotes) {
return (
<div className="card">
<div className="item-1">{this.props.header}</div>
<div className="item-2">Add content...</div>
<i className="fa fa-quote-left"></i>
<i className="fa fa-quote-right"></i>
</div>
);
}
else {
return (
<div className="card">
<div className="item-1">{this.props.header}</div>
<div className="item-2">Add content...</div>
</div>
);
}
The only difference between the two HTML components is that one has two extra font-awesome elements. Ideally, you would want to use some base markup, and append content to it based on the result of the conditional.
I tried the following approach where I put the HTML content into an array and pushed the extra HTML elements in if the condition this.props.quotes was met:
var cardContent = [
<div className="item-1">{this.props.header}</div>,
<div className="item-2">Add content...</div>
];
if(this.props.quotes) {
cardContent.push(<i className="fa fa-quote-left"></i>);
cardContent.push(<i className="fa fa-quote-right"></i>);
}
return (
<div className="card">
{cardContent}
</div>
);
This introduces a new problem, mainly that React complains about missing key props in the array:
Warning: Each child in an array or iterator should have a unique "key" prop.
In this context, it doesn't make sense to give the elements keys since 3/4 of the content is static (the only non-static element is {this.props.header}).
Is there a better way of appending to existing JSX than the method I outlined above? I don't want to suppress all unique key prop warnings since it is still valid in the case of mapping. Is it better to just accept the redundant HTML approach?
When you render an Array of JSX elements, each one must have a key property on them. As you construct your array, you can do something like
cardContent.push(<div className="item-1" key="item-1">..</div>)
cardContent.push(<div className="item-2" key="item-2">..</div>)
I also want to mention for the example you've described, your elements are simple enough that having an inline condition rather than having two blocks that you conditionally return
return (
<div className="card">
<div className="item-1">{this.props.header}</div>
<div className="item-2">Add content...</div>
{this.props.quotes && <i className="fa fa-quote-left"></i>}
{this.props.quotes && <i className="fa fa-quote-right"></i>}
</div>
)
In my AngularJS directive, I want to apply focus to the first child of type <pre> of the last child of type <div>.
That is if my document looks like this:
<div main-div>
<div>
</div>
<div>
<div>
<pre></pre>
</div>
</div>
<div>
<div>
<pre the-one></pre>
</div>
</div>
the <pre> it should select is the last one, with an attribute the-one.
Is there any way to do this?
if you have the structure above as a jqLite element (however you get it a hold of it), you could do the following:
var divs = element.children().find("div");
var theOne;
if (divs.length > 0){
theOne = angular.element(divs[divs.length-1]).find("pre");
}
I have an element:
<div class="wrapper" > ... </div>
I know I can use angular to apply a class conditionally:
<div ng-class="{'wrapper-big': style.big}" > ... </div>
But I want to keep a static class and add 'big' using angular.
Desired output:
<div class="wrapper big" > ... </div>
So the class big is what I want to conditionally add.
you can use the class and ng-class attributes together.
<div class="wrapper" ng-class="{'big': /*CONDITION*/}" > ... </div>
use the array syntax of ng-class.
e.g.
<div ng-class="[style1, style2, style3]" > ... </div>
Here is an example - https://docs.angularjs.org/api/ng/directive/ngClass