Here I am using cypress tool for automation. How to write code for dropdown menu
Here is the HTML code
I just done like this way but its not working
cy.get('.dropdown-heading-dropdown-arrow').click()
cy.get('#0').click()
After dropdown opens search for the option with required text.
Not sure which selector might work for you, either role or .MuiMenuItem-root looks best, or try just getting any element with the text
cy.get('.dropdown-heading-dropdown-arrow').click()
cy.contains('[role="option"]', 'Select All')
.click()
// or
cy.contains('.MuiMenuItem-root', 'Select All')
.click()
// or
cy.contains('Select All')
.click()
Have a look at this. Gives a good explanation as well.
select dropdownlist item using cypress
Otherwise you can just get it by css selector, xpath or you can do cy.contains
Related
I'm trying to use Cypress to click a react-select element. However, I get very inconsistent results.
My code for clicking the element is as follows:
cy.get('div[class*=container]').contains('Brand').click()
Sometimes this works, sometimes it doesn't. Sometimes if I repeat this line twice (which is kind of hacky...), it works, but on other occasions it doesn't...
What would be the correct and fool-proof way to wait for this element to properly load and click it only then in Cypress?
I looked into this cypress repo and it suggested two way to do the click().
cy.contains('.product', 'First item')
.find('button.order')
.click()
.wait(1000)
cy.contains('.product', 'First item')
.find('button.order')
.click()
.click()
Because its a select element, what you would want to do is:
cy.get('div[class*=container]').select('Brand')
or
cy.get('div[class*=container]').contains('Brand').realClick()
Looking at examples of react-select, there are a lot of classes with container in them, so 'div[class*=container]' is not the best selector.
I understand class*=container is to circumvent the style hash which can change on compile.
Ideally, add a specific class to the source, as per the first example on the home page
<Select
className="basic-single"
...
then you have a link to the top-most element, which is clickable.
cy.visit('https://react-select.com/home')
cy.get('div.basic-single')
.should('contain', 'Ocean')
.click()
cy.contains('Green').click() // option selection
cy.get('div.select__control').eq(0)
.should('contain', 'Green')
I ran into a problem. Can anyone help me ?
So, I have two drop down lists and the second is dependent on the option I choose on the first.
Say, for example: The first drop down list has the options 'numbers' and 'letters', while the second drop down list is empty by default. However, when I choose the option 'letters' on the first drop down list, the second is filled with the options 'A', 'B' and 'C'. Manually, it is working fine, but when I select the first drop down list with Cypress, the second doesnt get filled. It remains empty, so I cant choose anything on it.
HTML:
<select id="list" class="selectpicker form-control" onchange=""><option value="0">select your preferences</option><option value="2">numbers</option><option value="3">letters</option></select>
CYPRESS:
cy.get('#list').select('letters')
it does select the option letters, I can see the option letters selected on the first drop down list, but nothing happens on the second.
The solution from what it seems is to force the click because, from what I could gather, cypress chooses the option but IT DOESNT CLICK THE OPTION! Is this a bug?
So, this is the giant that was necessery, in the end to make it work:
//choose the option on the first drop down
cy.get('#list').select('letters')
cy.get('#list').contains('letters').then(option => {
cy.wrap(option).contains('letters');
option[0].click();
cy.get('#list').contains('letters');
});
//choose the option on the second drop down
cy.get('#list2').select('A')
cy.get('#list2').contains('A').then(option => {
cy.wrap(option).contains('A');
option[0].click();
cy.get('#list2').contains('A');
});
//click on the button to save the options selected
cy.get('.saveButton').click()
when, normally, it should be only:
cy.get('#list').select('letters')
cy.get('#list2').select('A')
cy.get('.saveButton').click()
Do you guys think this is a bug ?
I think you should "force" the refreshing data from the "non-updated" dropdown.
Try to "click()" it.
Something like this:
cy.get('#list')
.contains('letters')
.then(option => { // Confirm have correct option
cy.wrap(option).contains('letters');
option[0].click(); // After click, mdc-select should hold the text of the
// selected option: cy.get('#list').contains('letters');
});
Maybe this link can help you: select dropdownlist item using cypress
alternatively you can select by value cypress docs
cy.get('#list').select('3')
I'm currently using Cucumber / Selenium / Ruby to create my automation framework and setup my first test. The one I'm working on involves me to fill in a form in order to proceed to the next stage. The form contains a dropdown with multiple values, of which I want to select one (and any one!)
Inspect Element of the Dropdown Menu
<input type="search" class="ember-power-select-trigger-multiple-input" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" id="ember-power-select-trigger-multiple-input-ember3325" aria-controls="ember-power-select-options-ember3325" style="width: 100%;" placeholder="All classes">
I've therefore made use of the class inside my step below:
My Step
#wait.until {#driver.find_element(:css => 'input.ember-power-select-trigger-multiple-input').click}
At the moment, when I run this, it's able to find the correct dropdown option and click it. The options in the list appear, but obviously nothing happens.
What I'd like to know is how I can extend this further so that the dropdown is selected, and that the "first" option is selected? I don't want to specify what it should be, but it just should randomly select the first from the list and use that.
Any thoughts on the easiest way to achieve this?
Research Snippet
I did some research and found the following snippet which I thought I could add to my code, however I'm unsure if it would actually work, or whether I could use this in conjunction with the #wait.until step that I mentioned above?
groupDropdown = #driver.find_element(:css => 'input.ember-power-select-trigger-multiple-input')
option = groupDropdown.find_element(:css, "option:nth-child(1)")
option.click
#wait.until {#driver.find_element(:css => 'input.ember-power-select-trigger-multiple-input').click}
#wait.until {#driver.find_element(:css => '.ember-view > li > .ember-view > li:nth-of-type(1) > .ember-view > li').click}
This worked.
Until
The “until” method within Selenium requires a “truthy” response to continue with the rest of the code.
What you could do is this:
power_select = #driver.find_element(:css => 'input.ember-power-select-trigger-multiple-input')
#wait.until {power_select.displayed?}
power_select.click
This will wait for the element to be displayed on the page, which returns a boolean, and then follow through with a click
Select
Following on from that, the methods for Selects are hidden within the library quite well, but after searching around for a bit:
To Select by text:
Selenium::WebDriver::Support::Select.new(#driver.find_element(:css => <insert_css_of_select_here>)).select_by(:text, <insert_option_text_here>)
To Select by index:
Selenium::Webdriver::Support::Select.new(#driver.find_element(:css => <insert_css_of_select_here>)).select_by(:index, <insert_index_value_here>)
Selecting by index is what you most likely want to do here, setting the index value to 0 to select the first option.
This will let you select required option of ember-power-select with Capybara:
find('.ember-power-select-trigger').click # Open trigger
find_all('ul.ember-power-select-options > li')[1].click # Select 2nd option
Tested with latest ember-power-select.
You might find the click be quite slow if your Capybara.default_max_wait_time is high, so to speed things further you can do this:
find('.ember-power-select-trigger').click # Open trigger
Capybara.using_wait_time(0.1) do
find_all('ul.ember-power-select-options > li')[1].click # Select 2nd option
end
I am working on a Drupal project which is using the Editable fields module.
Using that module I'm exposing a dropdown list of text options. It works just great. You click on the list, select an option and the option is updated via Ajax.
My challenge is I'm trying to change the options programmatically via jQuery. Using the following code:
jQuery('select#edit-field-status-0-field-status-und').val(1);
... my browser console area is happy with the code but the Ajax update does not take place.
I tried:
jQuery('select#edit-field-status-0-field-status-und').val(1).change();
Again no errors but the Ajax event still did not execute.
$('#edit-field-status-0-field-status-und').val("1");
will do the trick, as the only reason it wouldn't work would be that you have your select values as strings instead of numbers.
Alternatively the following is more detailed:
$('#edit-field-status-0-field-status-und option').eq(1).prop('selected', true);
Also this is not an 'AJAX' function, it's simply Jquery updating the DOM for the particular element.
The code I was using as recreated below was correct:
jQuery('select#edit-field-status-0-field-status-und').val(1).change();
I found out the reason why it wasn't working was because the ID of the target element changed dynamically.
So when I first inspected and found edit-field-status-0-field-status-und, the same element would change IDs to something like edit-field-status-0-field-status-und--1.
That was throwing things off and gave the impression my code wasn't working.
Thanks to #gts for your input.
I am trying to select a link/button inside of a form, that is in a div. the way it was made is that there are two links/buttons of the same id, name etc. however they are in different forms, so the code i wanted to use is:
_myTest.Form(Find.ById("PermissionsForm")).Child(Find.ByClass("saveBtn")).Child(Find.ByText("SAVE"));
any help would be appreciated
I think this is what you need:
var button = _myTest.Form("PermissionsForm").Button(Find.ByClass("saveBtn"));
This will lookup the button having the class 'saveBtn' inside the form 'permissionsform' in your browser instance _myTest.
Have a look at this page to decide if you need to have .Button(..) or .Link(...) based on the html tag that is used in your html.
How about building a regex for the element?
Regex could something like this
Regex elementRe = new Regex("id=LnkOk href="http://stackoverflow.com");
Then you can use your code to Click this link. The Click method can be extended to accept Regex if it is not already doing that.
Let me know how this goes or if you need more info.
Cheers,
DM