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.
Related
In Prestashop for English website, I need to show the Arabic Language selector and on the Arabic website I need to show English as a Language selector.
currently, it showing the current website language on the language selector bar. is there is a way to do this?
<div class="language-selector dropdown js-dropdown">
<span class="expand-more" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="language-dropdown">
<span><img class="lang-flag" src="{$urls.img_lang_url}{$current_language.id_lang}.jpg"/></span>
<span class="language-title">{$current_language.name_simple}</span>
<span class="dropdown-arrow"></span>
</span>
<ul class="dropdown-menu" aria-labelledby="language-dropdown">
{foreach from=$languages item=language}
<li {if $language.id_lang == $current_language.id_lang} class="current" {/if}>
<img class="lang-flag" src="{$urls.img_lang_url}{$language.id_lang}.jpg"/> {$language.name_simple}
</li>
{/foreach}
</ul>
</div>
Try this:
<div class="language-selector dropdown js-dropdown">
<span class="expand-more" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="language-dropdown">
<span><img class="lang-flag" src="{$urls.img_lang_url}{$current_language.id_lang}.jpg"/></span>
<span class="language-title">{$current_language.name_simple}</span>
<span class="dropdown-arrow"></span>
</span>
<ul class="dropdown-menu" aria-labelledby="language-dropdown">
{foreach from=$languages item=language}
{if $language.id_lang != $current_language.id_lang}
<li>
<img class="lang-flag" src="{$urls.img_lang_url}{$language.id_lang}.jpg"/> {$language.name_simple}
</li>
{/if}
{/foreach}
</ul>
</div>
I am having problems with links in navbar's using Bootcamp in XPages. I have an Internet Site document for develop.test.com. The Home URL on the page is Web/develop.nsf. I have the launch option of the DB set to the xPage xpHomePage.xsp. When I go to develop.test.com my Bootstrap site with menu displays perfectly. My problem is that the links in the navbar are inconsistent. Sometimes I have the DB name included, sometimes not?
The link Abmelden (near the bottom of the code) converts to http://develop.test.com/web/develop.nsf?logout which would be correct. The dropdown "Anwesenheiten/offen nach Name converts to http://develop.test.com/Web/xpAnwesendOffenNachName ==> somehow the develop.nsf is missing? I just cannot work out why.
I could of course just hardcode the NSF into the link - just doesn't seem right to me :o)
Thanking you for any help given.
=========== here is the code
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:div id="header" disableTheme="true">
<!-- This is the banner -->
<nav class="navbar-header navbar-inverse navbar-fixed-top" role="navigation" id="header">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="xpHomePage.xsp">
<xp:text escape="true" id="computedField1">
<xp:this.value><![CDATA[#{javascript:#DbTitle()}]]></xp:this.value>
</xp:text>
</a>
<!-- this is the hamburger menu that gets shown when the view is small enough -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Navigation umstellen</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- create a div so the header is collapsed when tiny -->
<div class="collapse navbar-collapse" id="header-menu">
<!-- and now the actual menu -->
<ul class="nav navbar-nav navbar-right navbar-inverse">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Anwesenheiten
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
offen nach Name
</li>
<li>
offen nach Standort
</li>
<li role="separator" class="divider"></li>
<li>
freigegeben nach Name
</li>
<li>
freigegeben nach Standort
</li>
<li>
freigegeben nach Monat
</li>
</ul>
</li>
<li>
<a href="?logout">
<span class="glyphicon glyphicon-log-out"></span>
<xp:text>
<xp:this.value><![CDATA[#{javascript:" Abmelden"}]]></xp:this.value>
</xp:text>
</a>
</li>
</ul>
</div>
</div>
</nav>
</xp:div>
</xp:view>
Try computing the whole href. It may be doing different things on different pages within the application, depending on context.
Which one is correct breadcrumb structure?
Example 1:
<a href="http://example.com/topic" itemprop="url">
<span itemprop="title">Topic Archive</span></a>
<div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display: inline;">
<a href="http://example.com/topic/parent-category" itemprop="url">
<span itemprop="title">ParentCategory</span></a>
</div>
<div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display: inline;">
<a href="http://example.com/child-category" itemprop="url">
<span itemprop="title">Child Category</span></a>
</div>
<span>Post Title Goes Here</span>
</div>
Example 2:
<div id="breadcrumb">
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a rel="home" href="http://www.example.com/topic" itemprop="url"><span itemprop="title">Topic Archive</span></a> ›
<span itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<span itemprop="title">Parent Category</span> ›
<span itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<span itemprop="title">Child Category</span> ›
</span>
<span>Post Title Goes Here</span>
</span>
</span>
</div>
Example 3:
<div id="breadcrumb">
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a rel="home" href="http://www.example.com/topic" itemprop="url"><span itemprop="title">Topic Archive</span></a> ›
<span itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<span itemprop="title">Parent Category</span> ›
<span itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<span itemprop="title">Child Category</span> ›
<h1 itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<span itemprop="title">Current Post Title</span> ›
</h1>
</span>
</span>
</span>
</div>
Test the code here: Google Testing Tool
For example number 3, is it right to include the current page in breadcrumb schema? Do I violate any rules?
If you want to use data-vocabulary.org (which is already considered outdated), example 3 is the most correct. It is standard to include the current page in the breadcrumb. Example 1 is not correct since you have not nested your elements. In this case, you would want to add the itemref property and give ids to your divs. The itemref property should equal the id of the next child. https://developers.google.com/structured-data/breadcrumbs?rd=1
You should definitely consider moving to schema.org, since that is the format the major search engines will almost certainly agree upon. According to schema.org, none of these are the proper implementation. Your overall list should be marked as a BreadcrumbList, with each item being marked as a ListItem. Yes, by convention, the current page is the last item in the list.
https://schema.org/BreadcrumbList
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.
<div class="list-group" id="menu">
MESSAGES <span class="label label-info">5</span> <span class="glyphicon glyphicon-envelope pull-right"></span>
<div id="sm" class="sublinks collapse">
<a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span> inbox</a>
<a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span> sent</a>
</div>
TASKS <span class="glyphicon glyphicon-tag pull-right"></span>
<div id="sl" class="sublinks collapse">
<a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span> saved tasks</a>
<a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span> add new task</a>
</div>
ANOTHER LINK ...<span class="glyphicon glyphicon-stats pull-right"></span>
</div>
In spite of both <a> got data-parent="#menu", none of them appearing triggers other to hide. How to update this code to hide one sublinks as other are visible?
The #menu must be a parent of the list-group, and the list-group needs to have the panel class.
http://www.bootply.com/tGF9MEGbLM