I'm recently using cypress and I want to get the array of list but I just want the to get <li> under the class "list" and not including the other children of <li>
I'm using
cy.get('.list >li')
but I'm also getting the children <li> under Home.
<ul class="list">
<li>Home</li>
<ul>
<li>Another One</li>
<li>Another Two</li>
</ul>
<li>Page</li>
<li>Hello</li>
<li>Hi</li>
</ul>
you have two ways to do this
get only li children of parent
cy.get('.list').children('li')
get children by level in dom
cy.get('.list > li')
.its('length')
.should('eq', 2)
You can also use the combination of selector and text using contains. In this way you will only get the intended li element.
cy.contains('li', 'Home')
You can do something like this as well:
cy.get('ul.list > li').each(($ele) => {
cy.log($ele.text()) //prints Home Page Hello Hi
})
Created a small POC from your HTML and this is what I got:
Related
From the following XML-document, I'm trying to specify XPath that will capture the text that immediately follows the h4-headline "Source", namely - in this example - "Information about the source":
<div class="doc-inf doc-inf-information">
<h3>Document information</h3>
<div>
<h4>Source</h4>
<ul>
<li>Information about the source</li>
</ul>
I've tried the following:
//h4[contains(text(), "Source")]/ul/li'
Which doesn't seem to work. Would anyone be able to help? I would greatly appreciate it.
EDIT:
My problem (which I didn't specify fully, sorry) is that this div tag has multiple h4 tags in it of which I want to select the ul-child for each:
<div class="doc-inf doc-inf-information">
<h3>Document information</h3>
<div>
<h4>Source</h4>
<ul>
<li>Source information</li>
</ul>
<h4>Language</h4>
<ul>
<li>Swedish</li>
</ul>
<h4>Publishers</h4>
<ul>
<li>Publishing Project</li>
</ul>
<h4>Record ID</h4>
<ul>
<li>36785</li>
</ul>
In essence, I'm trying to grab the child under h4 headlines "Source", "Language", "Publishers", "Record ID" (= what I'm interested in is "Source information", "Swedish", "Publishing Project" and "36785") but the h4 headlines are inconsistently placed across pages so I need to be able to target the children of the specific headlines.
You are directly accessing the tag <h4>, which has no children, therefore the following doesn't work:
//h4[contains(text(), "Source")]/ul/li
Try this instead:
//div[h4[contains(text(), "Source")]]/ul/li/text()
which searches for a <div> that has the tag <h4> in it with the text 'Source' and then it selects the <ul> child.
I want to click the third value(embedded li element) given the below code snippet, any help?
some-menu-title-value
some-menu-item-default-value
some-menu-item-optional-value
Assuming that the element will always be the 2nd <li> element, you can use:
element.all(by.css('li')).get(1).click();
If there are other <li> elements on the page, you can refine the css selector like:
element.all(by.css('li.some-menu-items')).get(1).click();
Its hard to tell from the HTML provided, but if your elements are nested like so:
<div class="myClass"
<li class="myClass"
<li class="myClass"</li>
</li>
</div>
Then you could do element(by.css('div>li>li')).click(); to click the inner <li> element.
I am using protractor to test my site. I countered a problem.
I have a ul, the number of li inside is dynamic,
<ul>
<li class='listing-item'>
<div class='prod-price'>$99</div>
</li>
<li class='listing-item price-onsale'>
<div class='prod-price'>$99</div>
<div class='prod-saving'>$10</div>
</li>
<li class='listing-item'>
<div class='prod-price'>$50</div>
</li>
...
</ul>
The 'prod-saving' div will only show up when 'price-onsale' class is present. I want to use protractor to test this logic, is there a way to do it? something like:
expect(elment(by.className('price-onsale').isPresent()).toBe(true).when('price-onsale).isPresent();
Your syntax will work almost word-for-word if you rearrange it a bit:
element(by.className('price-onsale')).isPresent().then(function(present) {
if(present) {
expect(element(by.className('prod-saving')).isPresent()).toBe(true);
}
});
It's a matter of testing the pre-condition first, and then testing the main condition based on the result of the first.
I have a html fragment that looks like the following;
<div class="sideBar">
<ul>
<li class="test testlist">
<div>test 1</div>
<ul>
<li class="test testlist"><div>sub test1</div></li>
<li class="test testlist"><div>sub test2</div></li>
</ul>
</li>
<li class="test testlist"><div>test 2</div></li>
</ul>
</div>
I need to get node list number two containing text "test 2", but when I try the following;
//div[contains(#class, 'sideBar')]//li[#class=\"test testlist\"])[2]//div
It returns node;
<li class="test testlist"><div>sub test2</div></li>
How would I go about returning node please;
<li class="test testlist"><div>test 2</div></li>
Many thanks,
C.
I'm not sure what the rule should be to get node with text "test 2".
First of all your xpath has a wrong parenthesis (copy past error):
//div[contains(#class, 'sideBar')]//li[#class=\"test testlist\"] -->)<-- [2]//div
There are two interpretation:
//div[contains(#class, 'sideBar')]//li[#class='test testlist'][2]//div"
Which will select all li (with class test testlis) descendant to the div which on second position to the parent.
Or:
(//div[contains(#class, 'sideBar')]//li[#class='test testlist'])[2]//div
Which will select the the second li (with class test testlis) of the three found.
Both is not what you like to have. Therefore try:
(//div[contains(#class, 'sideBar')]//li[#class='test testlist'][2])[2]//div
The second of the two on position two.
Or best(in my view):
//div[contains(#class, 'sideBar')]/ul/li[#class='test testlist'][2]//div"
The second li in the first direct child ul of the div .
<div id="suggestionlist">
<ol id="suggestionroot">
<li id="sugg_1">
<li id="sugg_2">
<li id="sugg_3">
<li id="sugg_4">
<li id="sugg_5">
<li id="sugg_6">
<li id="sugg_7">
<li id="sugg_8">
<li id="sugg_9">
<li id="sugg_10">
I have a search look ahead feature which I'm trying to automate. I'm trying to pick the 6th option in the list every time but I just can't seem to locate it! This is the nearest I've got but it's not working..
#Browser.div(:id, "suggestionlist").link(:index, 6).click
You should do some reading about HTML. <li> tag is not link, <a> tag is link.
So, to click <li id="sugg_6"> try this:
browser.li(:id => "sugg_6").click
To click a link inside the list item (not shown in your HTML but referenced in comments)
browser.li(:id => "sugg_6").link.click
(that presumes you want to click the first/only link inside the LI, otherwise you might need to specify an index value)
Did you try to access this element by XPath?
browser.find_elements_by_xpath("div[#id='suggestionlist'/li[6]").click