Unable to click dropdown from combo box - ruby

Using : Cucumber Watir / Web Driver
I am trying to click the drop-down element or any element that will open the list.
My error is:
undefined method `click' for # (NoMethodError)
My Watir code is:
#browser.divs(:class => 'dd-field').click #I have tried other Class names from the html. Can’t get it to click
My HTML ( That is highlighted per firebug ):
<div class="header">Deposit•to</div>
<div class="dropdown" ng-class="secondaryClass()">
<div class="dd-field" on="!selectedAccount" ng-switch="">
-- ngSwitchWhen: false -->
<!-- ngSwitchDefault: -->
<div class="dd-label ng-scope" ng-switch-default="">Select•an•account</div>
<div class="dd-arrow-box">
<div class="dd-arrow"></div>
</div>
I tried Fire on event click without success.

You get that error because you are using #browser.divs instead of #browser.div, notice one is plural divs, which returns a list of <div> elements, so no wonder you can't click a list of elements.
Try use #browser.div instead, which returns one single element and you should be able to click.
#browser.div(:class => 'dd-field').click

Related

Cypress: How to click on a array-list element if matching text found

I want to add an item in cart with a matching text like 'cashews'. I tried below code but .click() function is giving error as "bind and event handler to the click javascript event"
cy.get('.products').find('.product').each(($e1, index, $list) => {
const textveg = $e1.find('h4.product-name').text() {
if (textveg.includes('Cashews')) {
$e1.find('.button').click();
}
}
})
can someone suggest what can be the possible reason that .click() method is not identified by cypress. I am using cypress version 7
How you do this depends on the structure of the HTML.
It looks like you may have this sort of hierarchy
<div class="products">
<div class="product">
<h4 class="product-name">Almonds</h4>
<button>Add to cart</button>
</div>
<div class="product">
<h4 class="product-name">Cashews</h4>
<button>Add to cart</button>
</div>
</div>
Take the product section containing the text you want, and within that find the products <button>.
Your test might be
cy.contains('.product', 'Cashews') // pick the <div class="product"> with required text
.find('button') // inside the product, find it's button
.click()
You can use .filter() to find your element and click it:
cy.get('h4.product-name').filter(':contains("Cashews")').click()

Click on a element with specific text

Alright, I have a item which has this class class="country" and there are 12 elements with the same class. Now I want to get a element on its value. For example Italy. And now I want to click on a link in this item. The class of the link is class="link". So basically I want to click the link of the item with the name Italy
My code at the moment:
cy.get('.country').should('have.text', 'Italy').click();
HTML
<div class="countries">
<div class="text">
<h3></h3>
<div class="country">Italy</div>
<h4>Yala</h4>
<p>test</p>
<a class="link" href="/mysite">Show details</a>
</div>
</div>
Should() is an assertion and won't select the element you want.
you probably want the contains() function.
cy.get('.country').contains('Italy').click()
Best

Cypress - cy.click() does not click on the value in the select2 drop down

I have a dropdown which has select2 class. On clicking the arrow in drop down, I get below code activated in DOM which has the values Reason1 and Reason2 in the dropdown. I want to iterate on the available values and select the desired option.
Using each function, I am able to itearte on the array and get the available values, but I am unable to perform cy.click() on the same to get the value selected. I am not getting any error and code is running fine but the click in not happening (neither on div , li nor span tag)
`<ul class="select2-results">
<li class="select2-results-dept-0 select2-result select2-result-selectable">
<div class="select2-result-label">
<span class="select2-match"></span>
Reason1
</div>
</li>
<li class="select2-results-dept-0 select2-result select2-result-selectable">
<div class="select2-result-label">
<span class="select2-match"></span>
Reason2
</div>
</li>
</ul>`
Given below is my code
cy.get('#select2-drop > .select2-results').find('li').each(($el,index,$list) => {
let option = $el.find('div').text()
if(option=='Reason2')
{
$el.find('div').click()
}
})
If I add $el.find('div').css('background-color','yellow') in the if condition, elements background color is getting changed to yellow but click is not happening.
Can anyone please help on this.
Thanks!
you can use these command if you want to select the second one
cy.get('#select2-drop > .select2-results')
.type("{downarrow}")
.type("{downarrow}")
.type("{enter}")

Xpath not found

When executing the test case, this error is shown:
Button with locator 'xpath=//*[#id="stBanner"]/div[2]/a[2]' not found.
The element doesnt't have an id, and I have to use Xpath, but it can't be found.
This is the code when I inspect the element:
<div class="stRight">
<span id="mobileSearchIcon" class="glyphicon glyphicon-search"></span>
<!-- Logged in --><!-- Logged out -->
<a class="user-sts-link" href=" uri=nm:oid:Z6_72A2IA80O0US40QOM4JF0F30O3">REGISTER</a>
<a class="user-sts-link" href="?uri=nm:oid:Z6_72A2IA80O0CSB0Q4ODDFDQ0081">LOGIN</a>
</div>
This is the xpath:
//*[#id="stBanner"]/div[2]/a[2]
This is the testcase:
SeleniumLibrary.Open Browser #{tst3Url}[0] firefox
SeleniumLibrary.Click Button xpath=//*[#id="stBanner"]/div[2]/a[2]
Don't use the Click Button keyword - it is strictly for html elements of the <button> type.
Instead, use Click Element - your target element is an <a>, and with Click Elements the browser will execute the click on it.

XPATH help for web scraper

I need to create a button in Web Scraping Chrome Extension to grab data from a web page but I cant get the next page button to work
<div class="on" onclick="javascript:djxtablePage("_djxid_followup_status_",1)"> > </div>
When you click next button > the code changed to the following
<div class="on" onclick="javascript:djxtablePage("_djxid_followup_status_",2)"> > </div>
Div around the buttons
<div class="dxpaging"> </div>
But I have got it to go forward > and then backwords as it only selects the active button at the start.. XPATH works but as per image it only goes the the 1st active button as there is 4 buttons.
//*[contains(concat( " ", #class, " " ), concat( " ", "on", " " ))]
To get all the buttons use XPATH:
//*[#class='on'][#onclick]
To get all the buttons, if there may another class than on added to the element, use XPATH:
//*[contains(#class,'on')][#onclick]
To get Button 1:
//*[#class="on"][contains(#onclick, '1')]
To get Button 2:
//*[#class="on"][contains(#onclick, '2')]
Above XPaths work on code:
<div>
<div class="on" onclick="javascript:djxtablePage("_djxid_followup_status_",1)">Button 1</div>
<div class="on" onclick="javascript:djxtablePage("_djxid_followup_status_",2)">Button 2</div>
</div>

Resources