I click on the input field and popup with items list appears. But I cannot click on any item
cy.get('#field')
.click({force:true}) //popup with items list appers
cy.get('.ant-select-dropdown-menu')
.should('be.visible')
.contains('Item123', { timeout: 20000})
.click({force:true})
Error:
Timed out retrying: Expected to find content: 'Item123' within the element: <ul.ant-select-dropdown-menu> but never did.
I use this html.
I click on the field and popup appears with items list. I want to click on the any item.
html:
<div style="position: absolute; top: 0px; left: 0px; width: 100%;">
<div>
<div class="ant-select-dropdown ant-select-dropdown-hidden" style="width: 180px; left: 883px; top: 477px;">
<div id="753a81bb-579c-4483-f7e5-5527f7c01f3a" style="overflow: auto; transform: translateZ(0px);">
<ul role="listbox" class="ant-select-dropdown-menu ant-select-dropdown-menu-root ant-select-dropdown-menu-vertical" tabindex="0">
<li role="option" unselectable="on" class="ant-select-dropdown-menu-item" aria-selected="false" style="user-select: none;">
Item1 <i aria-label="icon: check" class="anticon anticon-check ant-select-selected-icon"></i>
</li>
<li role="option" unselectable="on" class="ant-select-dropdown-menu-item" aria-selected="false" style="user-select: none;">
Item12 <i aria-label="icon: check" class="anticon anticon-check ant-select-selected-icon"></i>
</li>
<li role="option" unselectable="on" class="ant-select-dropdown-menu-item" aria-selected="false" style="user-select: none;">
Item123 <i aria-label="icon: check" class="anticon anticon-check ant-select-selected-icon"></i>
</li>
<li role="option" unselectable="on" class="ant-select-dropdown-menu-item" aria-selected="false" style="user-select: none;">
Item1234 <i aria-label="icon: check" class="anticon anticon-check ant-select-selected-icon"></i>
</li>
</ul>
</div></div></div>
You can use eq() to get DOM element at a specific index in an array of elements:
cy.get('li.ant-select-dropdown-menu-item', {
timeout: 20000
}).eq(2).click({
force: true
})
Related
I need to run through a list of users and open each in a new tab. The tab should close upon performing an action and return to the first tab to select the next user in the list. I'm having trouble selecting the next user in the list by order. The problem is that each user can be selected only by clicking their photo- which is a child element of the list item.
HTML
<div class="_gs38e">
<ul class="_8q670 _b9n99">
<li class="_6e4x5">
<div class="_npuc5">
<a class="_pg23k _9irns _gvoze" style="width: 100px; height: 100px;">
<img class="_rewi8" src="https://pic.com/t51.2885-
_1930374081979351040.jpg"></a>
<div class="_eryrc">
<a class="_2g7d5 notranslate _o5iw8" title="username1_"
href="/username1_/">username1_</a>
</div>
</div>
</li>
<li class="_6e4x5">
<div class="_npuc5">
<a class="_pg23k _9irns _gvoze" style="width: 100px; height: 100px;">
<img class="_rewi8" src="https://pic.com/t51.2885-
_1930374081979351040.jpg"></a>
<div class="_eryrc">
<a class="_2g7d5 notranslate _o5iw8" title="username1_"
href="/username1_/">username1_</a>
</div>
</div>
</li>
<li class="_6e4x5">
<div class="_npuc5">
<a class="_pg23k _9irns _gvoze" style="width: 100px; height: 100px;">
<img class="_rewi8" src="https://pic.com/t51.2885-
_1930374081979351040.jpg"></a>
<div class="_eryrc">
<a class="_2g7d5 notranslate _o5iw8" title="username1_"
href="/username1_/">username1_</a>
</div>
</div>
</li>
<li class="_6e4x5">
<div class="_npuc5">
<a class="_pg23k _9irns _gvoze" style="width: 100px; height: 100px;">
<img class="_rewi8" src="https://pic.com/t51.2885-
_1930374081979351040.jpg"></a>
<div class="_eryrc">
<a class="_2g7d5 notranslate _o5iw8" title="username1_"
href="/username1_/">username1_</a>
</div>
</div>
</li>
<li class="_6e4x5">
<div class="_npuc5">
<a class="_pg23k _9irns _gvoze" style="width: 100px; height: 100px;">
<img class="_rewi8" src="https://pic.com/t51.2885-
_1930374081979351040.jpg"></a>
<div class="_eryrc">
<a class="_2g7d5 notranslate _o5iw8" title="username1_"
href="/username1_/">username1_</a>
</div>
</div>
</li>
</ul>
</div>
This results in the first user being selected each time as it just finds the first picture on the page for all the list items. I've added an output of the username text to make sure the each do loop is running through the list items in order. It successfully prints the username of a different list item every time while only opening the first user. I need a way to define the photo element as a child of each list item to be included in the each.do loop
Mylist = browser.ul(:class => "_8q670 _b9n99")
#Index the UL to open each user in order
Mylist.users.each_with_index do |user|
#open user in new tab by selecting photo
browser.a(:class => '_pg23k _9irns _gvoze').exists?
browser.a(:class => '_pg23k _9irns _gvoze').click(:control)
browser.windows.last.use
#performs action and closes tab
browser.windows.last.close
puts user
puts user.text
end
How do I define the element to be selected as the child of the current li in the list?
Inside the loop you need to use
user.a(:class => '_pg23k _9irns _gvoze').click(:control)
The reason is that a browser object can be used to search elements inside the main html page. If you use 'browser' inside the loop it will be looking at the entire HTML, and where more than one element that meets the search criteria exists, it will return the first one found. So even through it is inside the loop, it would find the same element on the page every time.
To use the current item in the list that is being iterated you need to use the name (in this case user) that you've told it to assign to the list elements as it walks the list.
I'm newbee in Boostrap and I try since 2 days to manage Boostrap carouseul mode.
My images in slide are Disproportionate when I resize navigator ! I was unable to find solution. I try many solution in CSS but I naver finnd solution.
I use default CSS parameter, present in carousel mode. I try carousel mode from w3schools (image are not corrupt when we resize navigator).
My CSS
/* Carousel base class */
.carousel {
height: 500px;
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
margin: auto;
}
My HTML
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="media/image1.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>Secucampus.com</h1>
<p class="trans"> bla bla</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Plus d'informations</a></p>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="media/image2.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>Secucampus.com</h1>
<p class="trans">bla bla</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Contactez nous</a></p>
</div>
</div>
</div>
<div class="item">
<img class="third-slide" src="media/image3.jpg" alt="">
<div class="container">
<div class="carousel-caption" style="text-align:left">
<h1>bla </h1>
<p></p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Contenu des cours</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
The result when I resize image to Smarphone mode :
Thank for your help
Regard
Edit : Banzay :
I try to remove it and the result decrease image in hignht when I reduce the width of the navigateur.
The html page contains two containers. Each container has two columns, the left for selectable list items and the right for selected list items. So once you click on the list item it moves from the left column to the right column.
The first container is for associated clients.
The second container is for countries.
They both use similar code without a unique id or name.
HTML code for first container:
<div class="col-sm-12 col-md-6">
<div class="tab-section">
<h3 class="section-header"> Associated Client(s) </h3>
<div class="row">
<div class="col-sm-12">
<div id="ClientControlDiv">
<div style="margin: 0 auto; width: 450px;">
<select id="AssociatedClientList" class="multi-select" name="AssociatedClientList" multiple="multiple" style="position: absolute; left: -9999px;">
<div id="ms-AssociatedClientList" class="ms-container">
<div class="ms-selectable">
<div class="panel-heading ">
<ul class="ms-list" tabindex="-1" style="height: 250px; width: 200px;">
<li id="3ce0a0cc_378d_4477_8787_84033319940f-selectable" class="ms-elem-selectable ms-hover">
<span>(Test) 3M</span>
</li>
</ul>
</div>
<div class="ms-selection">
<div class="panel-heading ">
<div class="panel-title">Selected Client(s)</div>
</div>
<ul class="ms-list" tabindex="-1" style="height: 250px; width: 200px;">
<li id="3ce0a0cc_378d_4477_8787_84033319940f-selection" class="ms-elem-selection" style="display: none;">
<span>(Test) 3M</span>
</li>
HTML code for second container for countries:
<div class="col-sm-12">
<div id="DesignationControlDiv">
<div style="margin: 0 auto; width: 450px;">
<select id="AssociatedDesignationsList" class="multi-select" name="AssociatedDesignationsList" multiple="multiple" style="position: absolute; left: -9999px;">
<div id="ms-AssociatedDesignationsList" class="ms-container">
<div class="ms-selectable">
<div class="panel-heading ">
<ul class="ms-list" tabindex="-1" style="height: 250px; width: 200px;">
<li id="d86b9350_aa83_43c7_bc2b_5fc7f5c6ccae-selectable" class="ms-elem-selectable ms-hover">
<span>Afghanistan</span>
</li>
</div>
<div class="ms-selection">
<div class="panel-heading ">
<ul class="ms-list" tabindex="-1" style="height: 250px; width: 200px;">
<li id="d86b9350_aa83_43c7_bc2b_5fc7f5c6ccae-selection" class="ms-elem-selection" style="display: none;">
<span>Afghanistan</span>
</li>
Once selected the html code is:
<div class="ms-selection">
<div class="panel-heading ">
<div class="panel-title">Selected Client(s)</div>
</div>
<ul class="ms-list" tabindex="-1" style="height: 250px; width: 200px;">
<li id="3ce0a0cc_378d_4477_8787_84033319940f-selection" class="ms-elem-selection ms-selected ms-hover" style="">
<span>(Test) 3M</span>
</li>
Ruby code I tried both:
#b.select_list(:class => "ms-list").li(:text => "(Test) 3M").when_present.select
#b.select_list(:class => "ms-list").li.span(:text => "(Test) 3M").select
Based on the supplied HTML, there's no select_list element. For example:
b.ul(class: "ms-list").li(class: "ms-elem-selectable").span(text: "(Test) 3M").exists?
#=> true
b.ul(class: "ms-list").li(id: /selectable/).span(text: "(Test) 3M").exists?
#=> true
b.select_list(:class => "ms-list").li(class: "ms-elem-selectable").span(text: "(Test) 3M").exists?
#=> false
If you want to click on "(Test) 3M", try something like:
b.ul(class: "ms-list").li(class: "ms-elem-selectable").span(text: "(Test) 3M").click
This is a preliminary answer since you question needs more code to be able to determine what you really are trying to do:
#b.li(:id => /.*selectable/, :text => "(Test) 3M").hover
#b.li(:id => /.*selectable/, :text => "(Test) 3M").click
this assumes that your other list that you do not show in your question has the id like /.*selected/. So Watir should look for all of the li items that have an id that contains selectable and then look for the first one with the text "(Test) 3M").select.
friends!
Is there any opportunity to create nested dropdown(multilevel dropdown) inside of dropdown menu item with bootsrap 3? Here is http://jsfiddle.net/kkqxgfk6/1/ what i'm trying to do. May be I made mistake somewhere in the code, is that so?
Here is the html-code:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li class="dropdown">
Dropdown2 <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li ><a href="#" >Something</a>
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
The nested "Dropdown2" menu item cann't be opened like its parent menu item called "Dropdown"
Add all bold content into your code.
<ul class="dropdown-menu" role="menu" **onclick="event.stopPropagation();"**>
<li class="dropdown" **id="test"**>
Dropdown2 <span class="caret"></span>
Add this code into javascript.
$( "#test1" ).click(function() {
$(this).attr("aria-expanded", "true");
$('#test').addClass("open");
});
Reasons for your problem By default when you click inside dropdown it closes.
here we are adding classes dynamically to second dropdown list.
Create one more CSS file and define "Dropdown-submenu" class.
Apply this "Dropdown-submenu" class to your inner "LI" tag as:
<ul class="nav navbar-nav">
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li class="dropdown dropdown-submenu">
Dropdown2 <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li ><a href="#" >Something</a>
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</li>
The CSS file Will define Dropdown-submenu as:
.dropdown-submenu {
position:relative; } .dropdown-submenu>.dropdown-menu {
top:0;
left:100%;
margin-top:-6px;
margin-left:-1px;
-webkit-border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px; } .dropdown-submenu:hover>.dropdown-menu {
display:block; } .dropdown-submenu>a:after {
display:block;
content:" ";
float:right;
width:0;
height:0;
border-color:transparent;
border-style:solid;
border-width:5px 0 5px 5px;
border-left-color:#333333;
margin-top:5px;
margin-right:-10px; } .dropdown-submenu:hover>a:after {
border-left-color: #999999; } .dropdown-submenu.pull-left {
float:none; } .dropdown-submenu.pull-left>.dropdown-menu {
left:-100%;
margin-left:10px;
-webkit-border-radius:6px 0 6px 6px;
-moz-border-radius:6px 0 6px 6px;
border-radius:6px 0 6px 6px; }
Is it possible to create navigation bar with image icon at page bottom by using twitter bootstrap, here is sample image of the icon bar,
Here is an example for you :
<div class="nav-bottom">
<ul class="container nav nav-pills">
<li class="col-xs-4 col-sm-2 active">
<a href="#">
<i class="glyphicon glyphicon-comment"></i><br>
Message Board
</a>
</li>
<li class="col-xs-4 col-sm-2">
<a href="#">
<i class="glyphicon glyphicon-home"></i><br>
Rooms
</a>
</li>
<li class="col-xs-4 col-sm-2">
<a href="#">
<i class="glyphicon glyphicon-shopping-cart"></i><br>
Shopping List
</a>
</li>
<li class="col-xs-4 col-sm-2">
<a href="#">
<i class="glyphicon glyphicon-wrench"></i><br>
Home Helpers
</a>
</li>
<li class="col-xs-4 col-sm-2">
<a href="#">
<i class="glyphicon glyphicon-cog"></i><br>
Settings
</a>
</li>
<li class="col-xs-4 col-sm-2">
<a href="#">
<i class="glyphicon glyphicon-user"></i><br>
User
</a>
</li>
</ul>
</div>
.nav-bottom {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: black;
padding: 5px 0;
}
.nav-bottom li + li {
margin-left: 0px;
}
.nav-bottom li a {
text-align: center;
background: black;
color: #ecf0f1;
}
.nav-bottom li:hover a,
.nav-bottom li:focus a {
background: #2980b9;
color: #ecf0f1;
}
.nav-bottom li.active a {
background: black;
color: #3498db;
}
Bootply