Extra li is showing in angular 2 ngFor - angular2-directives

I have an array like this : public colors = ['red','green','blue'];
This is my code:
<ul>
<li *ngFor="#color of colors; #i=index">{{i}}. {{color}}<li>
</ul>
This my output:
Why is this extra list is showing?

I solved it. It was occurring because i wrote "<li>" instead of "</li>" at the end of the li tag

Related

How to get count of 'li' elements list with selenium webdriver?

I have this html. I am trying to count total number of li elements inside the ul element. Even though there are 20 li elements but DOM shows less than 20.
<ul class="a-pagination">
<li class="a-disabled">←<span class="a-letter-space"></span><span class="a-letter-space"></span>Previous</li>
<li class="a-selected">1</li>
<li class="a-normal">2</li>
<li class="a-normal">3</li>
<li class="a-disabled" aria-disabled="true">...</li>
<li class="a-disabled" aria-disabled="true">20</li>
<li class="a-last">Next<span class="a-letter-space"></span><span class="a-letter-space"></span>→</li>
</ul>
Selenium should count the li elements inside the ul class because there are other li elements outside the ul class.
I have this:
List<WebElement> list1 = driver.findElements("not sure what will go here");
System.out.println("\nsize" + list1.size() );
What should be the locator to find the total li elements under the ul class? It should return the value of 20.
Can you try with this css selector :
ul.a-pagination li
like this :
List<WebElement> list1 = driver.findElements(By.cssSelector("ul.a-pagination li"));
and print like the way you are printing.

Locating li element inside ul element

i would like to get the count of li elements created inside ul element with a particular id. Below is the structure
<ul id="someid">
<li class="someclass"></li>
<li class="someclass"></li>
<li class="someclass"></li>
<li class="someclass"></li>
</ul>
Can someone help me locate li element with xpath.thanks.
You can use the following xpath
//ul[#id="someid"]/li[#class="someclass"]
If you want to filter the li elements you can give the restrictions based on attributes of the tag. Hope this helps.
To get the count of <li> elements created inside the <ul> element with a particular id you can use the following xpath :
driver.findElements(By.xpath("//ul[#id='someid']/li[#class='someclass']"))
Try the Below code to get count of <li> elements
List<WebElement> count=driver.findElements(By.Xpath(" //ul[#id="someid"]/li[#class="someclass"]"));
count.size()

Identifying the Web element with same class name in Selenium

I have tried to get the number of tweets(tweet count) through selenium
Here is the page source:
<li class="DashboardProfileCard-stat Arrange-sizeFit">
<a class="DashboardProfileCard-statLink u-textUserColor u-linkClean u-block"
title="1 Tweet"
href="/saisiva14"
data-element-term="tweet_stats">
<span class="DashboardProfileCard-statLabel u-block">Tweets</span>
<span class="DashboardProfileCard-statValue" data-is-compact="false">1</span>
</a>
</li>
<li class="DashboardProfileCard-stat Arrange-sizeFit">
<a class="DashboardProfileCard-statLink u-textUserColor u-linkClean u-block"
title="38 Following"
href="/following"
data-element-term="follower_stats">
<span class="DashboardProfileCard-statLabel u-block">Following</span>
<span class="DashboardProfileCard-statValue" data-is-compact="false">38</span>
</a>
</li>
<li class="DashboardProfileCard-stat Arrange-sizeFit">
<a class="DashboardProfileCard-statLink u-textUserColor u-linkClean u-block"
title="4 Followers"
href="/followers"
data-element-term="following_stats">
<span class="DashboardProfileCard-statLabel u-block">Followers</span>
<span class="DashboardProfileCard-statValue" data-is-compact="false">4</span>
</a>
</li>
I could not able to locate the web element for getting Tweets,Followers & following. The reason is span class names are common for all these elements.Please help me .
To get number of Tweets/ Following/ Followers, You can try the below statements:
System.out.println(driver.findElement(By.xpath("//a[contains(#title, 'Tweet')]/span[2]")).getText());
System.out.println(driver.findElement(By.xpath("//a[contains(#title, 'Following')]/span[2]")).getText());
System.out.println(driver.findElement(By.xpath("//a[contains(#title, 'Followers')]/span[2]")).getText());
To click on the Tweets/ Following/ Followers links, You can try the below statements:
driver.findElement(By.xpath("//a[contains(#title, 'Tweet')]")).click();
driver.findElement(By.xpath("//a[contains(#title, 'Following')]")).click();
driver.findElement(By.xpath("//a[contains(#title, 'Followers')]")).click();
or
driver.findElement(By.xpath("//a[./span[text()='Tweets']]")).click();
driver.findElement(By.xpath("//a[./span[text()='Following']]")).click();
driver.findElement(By.xpath("//a[./span[text()='Followers']]")).click();
The above statements are working fine for me.
try this
IList<IWebElement> elements = driver.FindElements(By.ClassName("DashboardProfileCard-stat"));
foreach (IWebElement element in elements)
{
IWebElement ele = element.FindElement(By.ClassName("DashboardProfileCard-statLabel"));
if (ele.Text == "Tweets")
{
return element.FindElement(By.ClassName("DashboardProfileCard-statValue")).Text;
}
}
this is using C#, you can modify accordingly if anyother language is used.
The selector .DashboardProfileCard-stat span:nth-child(2) should give you the collection of web elements pointing to the count. For example in Java:
ArrayList<WebElement> elements = driver.findElements(By.cssSelector(".DashboardProfileCard-stat span:nth-child(2)"))
Then you can use elements.get(0).getText() for tweets. elements.get(1).getText() for following. elements.get(2).getText() for followers. So:
ArrayList<WebElement> elements = driver.findElements(By.cssSelector(".DashboardProfileCard-stat span:nth-child(2)"));
int tweets = elements.get(0).getText();
int following = elements.get(1).getText();
int followers = elements.get(2).getText();
Of course, do your appropriate safety checks, etc. Check the length of the array before access.
This code is in Java :)
capture all the parents of the "SPAN" into a collection item.
Iterate on the collection to find the span elements (which are child of <a> tag) and capture text based on the class name variation statLabel / statValue".
List<WebElement> webElement = driver.findElements(By.xpath("//li[#class='DashboardProfileCard-stat Arrange-sizeFit']//a"));
for (WebElement element : webElement) {
System.out.println(element.findElement(By.xpath("//span[contains(#class,'statLabel')]")).getText());
System.out.println(element.findElement(By.xpath("//span[contains(#class,'statValue')]")).getText());
}

Trouble on selecting auto-suggest and moving it into the textbox

Note:- Here, the Listitems are not under div class
Could able to locate the element but the select function is not working.
HTML used:
<head>
<body id="data-search" class="hassidebar">
‌<ul id="material-result-list" style="top: 183px; left: 396.5px; width: 270px; display: block;">
<li>
<li>
<li>
<a>nitrate/0.2</a>
</li>
<li>
<li>
</ul>
CODE used:
Try 1:
List<WebElement> listItems = driver.findElements(By.xpath("//ul[contains(#id,'material-result-list')]/li"));
listItems.get(2).click();
Try 2:
List<WebElement> listItems = driver.findElement(By.id("material-result-list")).findElements(By.tagName("li"));
listItems.get(2).click();
(used more combinations, please help on this)
I could retrieve the auto-suggest texts using getText() method [so it confirms that there are no issues on locating the element]
But has trouble on select them and placing under text field for search
List<WebElement> link = driver.findElements(By.xpath("//ul[contains(#id,'material-result-list')]/li"));
String secondoption = link.get(2).getText();
System.out.println(secondoption);
The above script is trying to click on tag "li" and not on anchor tag "a";
Here, the getText() method of tag "li" will return text.
So, we need to click on specific anchor tag.
Solution:
List<WebElement> listItems = driver.findElement(By.id("material-result-list")).findElements(By.tagName("a"));
listItems.get(2).click();

Selenium get dynamic ID XPath

I'm new on Selenium, new here and my english is not the best.
I'm using selenium with .NET ...
I have a HTML page like this but the number of the events are different:
<div id="eventContent" style="text-align: center;">
<div class="event" id="event-8971062">
<ul>
<li ...></li>
<li ...></li>
<li ...></li>
</ul>
</div>
<div class="event odd" id="event-9224880">
<ul>
<li ...></li>
<li ...></li>
<li ...></li>
</ul>
</div>
</div>
I need to check all datas in the different divs but the count is dynamic and the (event)id is dynamic too. I'm trying to find out the count of the divs at first but this does'nt work. For that I try this:
DefaultSelenium selenium = new DefaultSelenium(...);
decimal count = selenium.GetXpathCount("//div[#id='eventContent']");
but this brings only 1 as result and not two for this example.
when I try:
Console.WriteLine(selenium.GetText("//div[#id='eventContent'][1]"));
it prints all divs, but when I do:
Console.WriteLine(selenium.GetText("//div[#id='eventContent'][1]/div"));
it prints only the first div and I do not understand why.
Could someone be so kind and give me an explaination of whats going on here and where I'm wrong?
Thanks in advance
elur
decimal count = selenium.GetXpathCount("//div[#id='eventContent']");
This will return the count of divs that have an id of eventContent - there is only one div like this, which is why you get a count of 1 (count variables are typically ints rather than decimals, incidentally).
If you want the count of the contained divs, use
int count = selenium.GetXpathCount("//div[#id='eventContent']/div");
This will count the number of div children of the div with an id of eventContent. This should return 2, as desired.
As for your GetText examples, I think GetText will only return the text of the first node that the xpath argument selects. So with
selenium.GetText("//div[#id='eventContent'][1]")
you get the entire text of the parent div, which naturally contains all the child divs, but with
selenium.GetText("//div[#id='eventContent'][1]/div")
you get the text of only the first child div. This xpath selects all the child divs, but GetText operates on a single element only, I believe. If you want to examine the text of each child div in turn, you'll need to first get a count of the child divs, then use for loop to get each one in turn:
for(int i = 1; i <= count; ++i)
{
string childXpath = "//div[#id='eventContent']/div[" + i + "]";
string eventText = selenium.GetText(childXpath);
// Processing of eventText
}
A for loop and manual xpath processing are needed here (rather than the neater foreach), as I believe Selenium doesn't have a way of taking an xpath and returning a collection of elements.
tryed this but returns with 0. I solved this with a while expression where I check with isElementPresent like this:
int a = 1;
while (selenium.IsElementPresent("//div[#id='eventContent'][1]/div[" + a + "]"))
{
// check data here
a++;
}
seems to work so. thanks a lot for your help,
best regards elur