Selenium - How to click on this span? - selenium

I've tried using cssSelector and xpath. I can't use class=chips__text as it is not unique. How can I click on the span with text Nou?
<ul id="targetparam17" class="chipschoice fleft">
<li class="hidden">
<a href="#" class="is-selected">
<span class="chips__text">Alege</span>
<span class="value"></span>
</a>
</li>
<li class="">
<a href="#" class="">
<span class="chips__text">Utilizat</span>
<span class="value">used</span>
</a>
</li>
<li class="">
<a href="#" class="">
<span class="chips__text">Nou</span>
<span class="value">new</span>
</a>
</li>
</ul>

Find the element with respect to the desired text i.e. "Nou" and then click on it. xpath for it is //span[text()='Nou']. In case if you with to use different texts to click on different spans, you can manipulate the xpath using string manipulation techniques. Hope it helps :)

ExpectedConditions.elementToBeClickable means to selenium to be clickable is that it is visible & enabled. See Here
So you should check whether webElement isDisplayed() & isEnabled().
Or alternatively you can use ExpectedConditions.visibilityOf(WebElement)

I've used //span[contains(.,'Nou')] and it works perfectly

Try below xpath :
driver.find_element_by_xpath("//ul[#id='targetparam17']//li//a//span[contains(.,'Nou')")

Related

Wrapper element for for loop

I'm currently expanding my horizon by trying out Vuejs.
I'm creating a navigation with data coming from my Vue instance, and I have the following code:
<ul class="nav">
<li class="nav-item" v-for="navLink in navLinks" :key="navLink.id">
<a class="nav-link" :href="navLink.url">{{ navLink.name }}</a>
</li>
</ul>
Now even though this works perfectly fine, I have seen the following two examples in videos instead:
<ul class="nav">
<template v-for="navLink in navLinks">
<li class="nav-item">
<a class="nav-link" :href="navLink.url">{{ navLink.name }}</a>
</li>
</template>
</ul>
<ul class="nav">
<div v-for="navLink in navLinks" :key="navLink.id">
<li class="nav-item">
<a class="nav-link" :href="navLink.url">{{ navLink.name }}</a>
</li>
</div>
</ul>
I'm asking myself which one of these is best practice.
Now from what I've learned, one should always (if possible) set a :key in a for loop. This is not possible on the tag, therefore I would think this option is the worse.
But what about option 3 and mine? Is there any difference? Is it just personal preference or is there an actual reason on why to choose one or the other.
Ty
The only difference I spot between the first and the third options is that you'd wrap each list item in an additional div. You don't need those wrappers unless you want to use this nesting for styling purposes.
Your example is perfectly fine. Just make sure ids you use for keys are unique.
Also avoid using v-if and v-for on the same element and rather add v-if on the parent
I think you should always put a key property in your for loop.
Say you have nothing to work with for an ID (some item.name could potentially be duplicated?) just use this:
<div v-for="(item, index) in items)" :key="index">
{{ item.name }}
</div>
index in this case is just the index of the items array.
So yours will be rendered like:
<ul class="nav">
<li class="nav-item" :key="navLink.id">
<a class="nav-link" :href="navLink.url">{{ navLink.name }}</a>
</li>
...
<li class="nav-item" :key="navLink.id">
<a class="nav-link" :href="navLink.url">{{ navLink.name }}</a>
</li>
</ul>
Whereas the third one will be:
<ul class="nav">
<div :key="navLink.id">
<li class="nav-item">
<a class="nav-link" :href="navLink.url">{{ navLink.name }}</a>
</li>
</div>
...
<div :key="navLink.id">
<li class="nav-item">
<a class="nav-link" :href="navLink.url">{{ navLink.name }}</a>
</li>
</div>
</ul>
I would say it's a bit verbose to wrap a <li> inside a <div> in each one of them.
Yours is fine, all of them indeed are going to work well, but the third one may have problems with custom css, since it's a wrapper for the tag.
The template is an alternative as it is stated in the docs.
You've set the key at the li tag, as long as you're following the guide for mantaining state with keys, it's fine.

How to change the glyphicon on click event?

I am trying to change glyphicon on click event. From console I found out that classes are not set properly.
From Inspect Element
<span _ngcontent-c2="" class="glyphicon-menu-up" ng-reflect-klass="glyphicon glyphicon-menu-up ar" ng-reflect-ng-class="[object Object]"></span>
This is the code I did in HTML part.
CODE:
<ul class="nav third-nav">
<li appExpandMenu (click)="isCollapsedA=!isCollapsedA">
<a>
<span [ngClass] = "{'glyphicon glyphicon-menu-up arrow': !isCollapsedA, 'glyphicon glyphicon-menu-right arrow': isCollapsedA}" class="glyphicon glyphicon-menu-{{sign}} arrow"></span>
<span class="third-menu-title">Docs</span>
</a>
</li>
<ul class="nav third-nav">
<li appExpandMenu (click)="isCollapsedA=!isCollapsedA">
<a>
<span [ngClass] = "{'glyphicon glyphicon-menu-up arrow': !isCollapsedA, 'glyphicon glyphicon-menu-right arrow': isCollapsedA}" class="glyphicon glyphicon-menu-{{sign}} arrow"></span>
<span class="third-menu-title">Docs</span>
</a>
</li>
you should apply [ngClass] like this:
[ngClass] ="isCollapsedA ? 'glyphicon glyphicon-menu-right arrow' : 'glyphicon glyphicon-menu-up arrow'"
This is perhaps the code you need .
https://stackblitz.com/edit/angular-ngclass-u5bzma?file=app%2Fapp.component.html

Selenium IDE `select` command fails to locate element - whose ID was filled automatically by the IDE

My problem: I'm failing to select an element in Selenium IDE, even though the target ID is filled automatically by the IDE.
Problem description:
In http://instantsearchplus.myshopify.com/, I want to type in the search field (top right).
This is the HTML code for the search field:
<input name="q" value="" aria-label="Search our store"
class="header-bar__search-input ui-autocomplete-input"
autocomplete="OfF" autocorrect="off" autocapitalize="off"
id="input_id_0_suggestor_007" isp_ac="OfF" type="search">
So, I enter the select Command, and after clicking on the search field, Selenium IDE automatically fills the Target with id=input_id_0_suggestor_007.
All is well, right?
Wrong!
When I try to run the script, I get the error
[info] Playing test case Untitled 2
[info] Executing: |open | / | |
[info] Executing: |select | id=input_id_0_suggestor_007 | |
[error] Element id=input_id_0_suggestor_007 not found
[info] Test case failed
What am I doing wrong?
Note: I tried various select related commands (select, selectFrame, selectWindow, etc. ) with a variety of possible targets (id, name, css, etc. ) - but did not find any combination that works. Click also didn't work.
The HTML code around the search field:
<div class="header-bar">
<div class="wrapper medium-down--hide">
<div class="large--display-table">
<div class="header-bar__left large--display-table-cell">
</div>
<div class="header-bar__right large--display-table-cell">
<div class="header-bar__module">
<a href="/cart" class="cart-toggle">
<span class="icon icon-cart header-bar__cart-icon" aria-hidden="true"></span>
Cart
<span class="cart-count header-bar__cart-count">2</span>
</a>
</div>
<div class="header-bar__module header-bar__search">
<form action="/pages/search-results" method="get" role="search">
<span role="status" aria-live="polite" class="isp_polite_powered_by_id ui-helper-hidden-accessible">Powered by InstantSearch+ Site Search Autocomplete</span><input name="q" value="" aria-label="Search our store" class="header-bar__search-input ui-autocomplete-input" autocomplete="OfF" autocorrect="off" autocapitalize="off" id="input_id_0_suggestor_007" isp_ac="OfF" type="search">
<button type="submit" class="btn icon-fallback-text header-bar__search-submit">
<span class="icon icon-search" aria-hidden="true"></span>
<span class="fallback-text">Search</span>
</button>
</form>
</div>
</div>
</div>
</div>
<div class="wrapper large--hide">
<button type="button" class="mobile-nav-trigger" id="MobileNavTrigger">
<span class="icon icon-hamburger" aria-hidden="true"></span>
Menu
</button>
<a href="/cart" class="cart-toggle mobile-cart-toggle">
<span class="icon icon-cart header-bar__cart-icon" aria-hidden="true"></span>
Cart <span class="cart-count">2</span>
</a>
</div>
<ul id="MobileNav" class="mobile-nav large--hide">
<li class="mobile-nav__link" aria-haspopup="true">
<a href="/" class="mobile-nav">
Home
</a>
</li>
<li class="mobile-nav__link" aria-haspopup="true">
<a href="/search" class="mobile-nav">
Search page
</a>
</li>
<li class="mobile-nav__link" aria-haspopup="true">
<a href="http://instantsearchplus.myshopify.com/pages/search-results/collections-accessories" class="mobile-nav">
Accessories
</a>
</li>
<li class="mobile-nav__link" aria-haspopup="true">
<a href="http://instantsearchplus.myshopify.com/pages/search-results/collections-best-seller" class="mobile-nav">
Best Seller
</a>
</li>
<li class="mobile-nav__link" aria-haspopup="true">
<a href="http://instantsearchplus.myshopify.com/pages/search-results/collections-gloves" class="mobile-nav">
Gloves
</a>
</li>
<li class="mobile-nav__link" aria-haspopup="true">
<a href="/pages/about-us" class="mobile-nav">
About us
</a>
</li>
</ul>
</div>
ClickAt //input works
Indeed, select command is usually meant for selecting options from a select tag.
Here's a quote from the documentation
Constructor. A check is made that the given element is, indeed, a SELECT tag. If it is not, then an UnexpectedTagNameException is thrown.

Issue with structuring breadcrumbs

I have the following html to structure my breadcrumbs:
<ul class="browsePageBC">
<li class="product-breadcrumb" itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb"><span class="product-breadcrumb-title" itemprop="title">Wanita</span><span class="glyphicon glyphicon-chevron-right"></span></li>
<li class="product-breadcrumb" itemprop="child" itemtype="http://data-vocabulary.org/Breadcrumb"><span class="product-breadcrumb-title" itemprop="title">Aksesoris </span></li>
</ul>
When I tested this on structured data testing tools, this is what it gives me. Wondering why it's not showing/parsing the child correctly?
Following sample code will help you to declare the parent and child property
<div id="breadcrumb">
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a rel="home" href="http://www.example.com" itemprop="url">
<span itemprop="title">Home</span>
</a> ›
<span itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/topic/technology/" itemprop="url">
<span itemprop="title">Technology</span>
</a> ›
<span itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/tag/gadgets/" itemprop="url">
<span itemprop="title">Gadgets</span>
</a> ›
<span>Sweet Post Title Goes Here</span>
</span>
</span>
</span>
</div>
Let me know if these code help on your way.
Google’s documentation: Rich Snippets – Breadcrumbs
You’ll see in their examples that you either
list all entries in the correct order (without using the child property), or
use the child property in which case you would have to nest the child item under the parent item.
Note that each entry needs its own itemscope.

XPath to select following-sibling

This is the code that I currently have:
<div>
<ul class="nav nav-pills nav-stacked">
<li>
<li>
<li>
<li>
<li>
<section>
<span name="merchant">ABZ</span>
</section>
<section>
<span class="glyphicon glyphicon-pencil" name="edit"></span>
<span class="glyphicon glyphicon-remove" name="delete"></span>
</section>
</li>
<li>
<li>
<li>
<li>
</ul>
<div class="add-item bottom" name="new-merchant">
</div>
I have tried the following:
xpath=//span[contains(.,'ABZ')]/following-sibling::section/span[#name='edit']
xpath=//span[contains(.,'ABZ')]/following-sibling::span[1]
I am using selenium, and I want it to click on the edit button that is right after the ABZ span.
This xpath worked for me in Chrome, using your html:
//span[contains(text(), 'ABZ')]/../following-sibling::section/span[#name='edit']
Edit
The .. means to go up a level. The .. takes the selector from span to section. Then the following-sibling finds the section after the parent section of your matching span.
Your original selector was matching span, then looking for a following-sibling to span.
Adding to the answer above, both the expressions below will work well.
//span[contains(text(), 'ABZ')]/following::section/span[#name='edit']
OR
//span[contains(text(), 'ABZ')]/../following-sibling::section/span[#name='edit']
Notably, the axis following will pick each node following the context node while the axis following-sibling will only pick the sibling nodes to the context node.