Cypress: How to click first link where id contains certain value - cypress

How to click first link where id contains certain value?
For example:
<a id="mambo" href="#></a>
<a id="jumbo1" href="#></a>
<a id="jumbo2" href="#></a>
<a id="mambo" href="#></a>
I want to click the first link where the id contains jumbo which would be jumbo1. How can I do that in Cypress?
I tried:
cy.get('a:visible').contains('jumbo').click()
But it did not work.

cypress uses jQuery selectors
so you can use a starts-with-selector if you want to match a string that starts with jumbo
cy.get(`a:visible[id^="jumbo"]`);
or contains-selector if you want jumbo to be anywhere within the id
cy.get(`a:visible[id*="jumbo"]`);

Related

identifying xpath from Ext JS application

I'm trying to automated a application designed in Ext Js, xpath identification is become complex. Please help in getting the xpath for the below scenario.
For a dropdown having a set of names, need to select a name from the list available.
I'm using a mouse action to locate the drop down name and then moveToElement particular element in the List of menu present.
For example If the menu is containing a list of names like, Abi, Ashwini Asha, Ashwini, Diva.
Using parameterizing I'm able to select the names from the menu.
But when I need to select Ashwini from the menu ,since Ashwini Asha is already present in the menu , Ashwini Asha object gets clicked.
contains() is not working here. Which function should I use?
The below is the code which am using :
html :
<div id="combo-1023-inputWrap" class="x-form-text-wrap x-form- text-wrap-default" role="presentation" data-ref="inputWrap">
<input id="combo-1023-inputEl" class="x-form-field x-form-text x-form-text-default " type="text" autocomplete="off" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true" aria-required="false" aria-invalid="false" aria-readonly="false" aria-disabled="false" aria-hidden="false" role="combobox" value="Triton" name="selectedName" size="1" data-ref="inputEl" data-componentid="combo-1023">
......
<li>------------ Ashwini Asha</li>
<li>------------ Ashwini</li>
</div>
to click on the menu :
action.moveToElement(driver.findElement(By.xpath("//input[#name='selectedName']"))).click().perform();
to load the data in the menu :
wait.until(ExpectedConditions.visibiltyOfElementLocated(By.xpath("//li[contains(text(),'"+NameParameter+"')]")));
click the object :
action.moveToElement(driver.findElement(By.xpath("//li[contains(text(),'"+NameParameter+"')]"))).click().perform();
Let me know how to select the name Ashwini alone?
Thanks
No need to use contains in your xpath. Go for exact match of the name.
By.xpath("//li[text()='"+NameParameter+"']")
or
By.xpath("//li[.='"+NameParameter+"']")
If I'm understanding this correctly, you could use:
Driver.Instance.findElements(...
This would return an array in which you could just iterate and perform actions on based on the .text of the element.

Find text in unordered list and click on link within that list item

In a ruby script that uses watir, I'm trying to find text within an list item within an unordered list, then click on the link within that list item. In the sample below, I want to find "Apple" and have it click on the link that takes you to http://samplegrocerystore.com/tehnc34.
<div class="col-login">
<img class="logo" src="/images/hello.png" />
<h1 style="margin-top:15px;">Select Account</h1>
You have multiple accounts -- please select the one you would like to log in with.
<ul>
<li><h3>The Grocery Store</h3><h4>Chapter: Apple (#01)</h4>
<br/><strong>Login to this account</strong>
</li><li>
<h3>The Grocery Store</h3><h4>Chapter: Banana (#02)</h4>
<br/><strong>Login to this account</strong>
</li>
</ul>
</div>
I guess you are saying that you don't know the link href ahead of time?
Assuming you have opened the page in question using a Watir::Browser variable called browser:
Working off the unique text in the list item (Apple),
browser.li(:text, /Apple/).link(:text, 'Login to this account').click
should click the desired link.
Or if you do know the link href ahead of time, it is easier to use that:
browser.link(:href, 'http://samplegrocerystore.com/tehnc34').click
Either one should work, though if your web page is fairly complicated using a regex to find the word Apple might be slowish.
Based on your HTML, you can use the find method on a lists collection to locate the element with the specified text and then click on the link within the list element:
li = lists.find { |el| el.text.include? "Apple"}
li.a.click
try the following in irb:
browser.h4(:text => /Apple/).links.count
browser.h4(:text => /Apple/).parent.links.count
browser.h4(:text => /Apple/).parent.parent.links.count
until you find your answer with just 1 link, then that's your immediate link following the 'Apple' text. Then just call it like below:
browser.h4(:text => /Apple/).parent.link.click

How to extract a the data-code attribute from a hidden element

Using Watir-Webdriver, I want to be able to extract the 'data-code' value so I can enter it into the textfield on the page to unlock my locked account. Usually the code is emailed but in our test environment the code is hidden on the page, <span data-code="123456">. I want to grab the '123456' code and put it in the code textfield.
I've been unable to figure out how to do this. I'm guessing because there is no way to actually access the data code?
Is it possible to do that if this is the HTML?
<h1>
Unlock your account
</h1>
<h2>
Please enter the 6 digit code that was just sen…
<span data-code="123456">
test#email.com
</span>
</h2>
You can use the attribute_value method:
browser.span.attribute_value('data-code')
#=> 123456
You can retrieve data-* attributes similar to other standard attributes like id, name, etc. The method name is simply the data attribute with the dashes replaced by underscores:
p browser.span.data_code
#=> "123456"

How to use Twitter Bootstrap Collapse to show some portion of the text and then the rest

I have text that I am displaying from a database. I would like to have a portion of the text displayed on page load (up to a certain character number), and then display the rest of the text using the "collapse" function from Twitter Bootstrap. I am unsure of how to do this. This is what I have so far:
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">See More...</a>
<div id="collapseOne" class="accordion-body collapse"><span class="description_text">{{$artist->description}}</span></div>
This will display the entire text contained in the "description" field on the click of the "see more" link. What I would like to have is a portion of the text showing on page load, and then the rest displayed (and toggled) on the click of the see more button. It would also be nice to have the "see more" button change to "see less" when the full text is displayed.
You can run PHP inside the blade tags, so;
<a class="accordion-toggle" data-toggle="collapse"
data-parent="#accordion2" href="#collapseOne">
{{ substr($artist->description,0,30).'...' }}
</a>
The final substr parameter being the number of characters to include
To change the link text, you will need to write some jquery to catch the show.bs.collapse callback and replace the innerhtml of the link.
This Twitter bootstrap 3.0 icon change on collapse is similar but is changing an icon.

Click a button with XPath containing partial id and title in Selenium IDE

Using Selenium IDE, I'm trying to click a button within a table on a webpage using XPath with a partial id and a title from the element. The XPath I'm using is:
xpath=//*[contains(#id, 'ctl00_btnAircraftMapCell')]//*[contains(#title, 'Select Seat')]
and thats the entire html code for an example of the buttons im trying to click:
<li id="ctl00_MainContent_repAircraftMap_ctl20_repAircraftMapRow‌​_ctl00_liAircraftMap‌​Cell" class="">
<a id="ctl00_MainContent_repAircraftMap_ctl20_repAircraftMapRow‌​_ctl00_btnAircraftMa‌​pCell" href="javascript:void(0)" seatnumber="20A" mapbindattribute="1124" title="Select Seat 20A" onclick="SeatClick(1124);"></a>
</li>
Am I constructing this incorrectly? It's not working!
Now that you have provided your HTML sample, we're able to see that your XPath is slightly wrong. While it's valid XPath, it's logically wrong.
You've got:
//*[contains(#id, 'ctl00_btnAircraftMapCell')]//*[contains(#title, 'Select Seat')]
Which translates into:
Get me all the elements that have an ID that contains ctl00_btnAircraftMapCell. Out of these elements, get any child elements that have a title that contains Select Seat.
What you actually want is:
//a[contains(#id, 'ctl00_btnAircraftMapCell') and contains(#title, 'Select Seat')]
Which translates into:
Get me all the anchor elements that have both: an id that contains ctl00_btnAircraftMapCell and a title that contains Select Seat.

Resources