Hi I am new in exploring cypress.
I notice that, there is no select options in my html code. How can I select the option in the dropdown box?
Let's take a look of my html
<div class="row asset_config">
<div class="loader-container">
<div class="loader-content">
<div class="required form-group"><label for="cc_7sgwxb2v9" class="">allocation</label>
<div class="Select css-b62m3t-container"><span id="react-select-3-live-region" class="css-1f43avz-a11yText-A11yText"></span><span aria-live="polite" aria-atomic="false" aria-relevant="additions text" class="css-1f43avz-a11yText-A11yText"></span>
<div class="Select__control css-1s2u09g-control">
<div class="Select__value-container css-319lph-ValueContainer">
<div class="Select__placeholder css-14el2xx-placeholder" id="react-select-3-placeholder">Select allocation</div>
<div class="Select__input-container css-6j8wv5-Input" data-value=""><input class="Select__input" autocapitalize="none" autocomplete="off" autocorrect="off" id="cc_7sgwxb2v9" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true" role="combobox" value="" style="color: inherit; background: 0px center; opacity: 1; width: 100%; grid-area: 1 / 2 / auto / auto; font: inherit; min-width: 2px; border: 0px; margin: 0px; outline: 0px; padding: 0px;"></div>
</div>
<div class="Select__indicators css-1hb7zxy-IndicatorsContainer">
<div class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer" aria-hidden="true"><span class="connect-icon connect-icon-caret-down"></span></div>
</div>
</div><input name="allocationType" type="hidden" value="">
</div>
</div>
</div>
</div>
</div>
In fact, I also notice that, cypress studio suggest me code to click the dropdown box:
cy.get(':nth-child(2) > form > .allocation_session > .asset_config > .loader-container > .loader-content > .required > .Select > .Select__control > .Select__value-container > .Select__input-container').click()
I found that not only unreadable is this approach, but also not reliable, because sometimes suggested codes that click on other dropdown doesnt work, if I didnt run the example code above or other suggested code.
Is there any reason behind why suggested code is coupled with other suggested code?
Is there a better way to select the element I want to get?
edit:
picture included
The react-select has the same user-actions as an ordinary HTML select, but you cannot use cy.select() command on it.
The general pattern is
open the dropdown menu by clicking on the "main" control
find the option you want to select within the menu listbox that is injected into the DOM after the above click action
click that option
verify the text of the option is now showing in the placeholder
// open the dropdown menu
cy.contains('label', 'allocation')
.next('.Select')
.click()
// find the option
cy.contains('Balanced Plus')
.click()
// verify option is selected
cy.contains('label', 'allocation')
.next('.Select')
.find('.Select__placeholder')
.should('contain', 'Balanced Plus')
Related
How can I add md-icon elements next to inputs like in angular material 1 and this screenshot from google contacts:
Google contacts edit form
I know I can use mdPrefix but I like this style better.
Code example:
<md-input-container>
<md-icon mdPrefix>star</md-icon>
<input placeholder="Test" mdInput />
</md-input-container>
The icon inside the input field and I'd like it to be next to it:
Using some css tricks, I was able make something close to the the provided screenshot.
css to position icons:
/deep/ .mat-icon {
color: grey;
width: 24px;
margin: 20px 40px 0 0;
}
html:
<div style="display: flex">
<md-icon >email</md-icon>
<md-input-container >
<input mdInput placeholder="Email">
</md-input-container>
</div>
Code example
I am trying to select a value from the table of dropdown menu. But Watir always gave me the unlocate error when using table/tr/td.
I can't locate the element using
#browser.div(:id, 'wikiActionMenuLink_dropdown').element(:tag_name, 'table').element(:tag_name, 'tbody').element(:tag_name => 'td').text
But the output of code below returns true.
#browser.div(:id, 'wikiActionMenuLink_dropdown').element(:tag_name, 'table').element(:tag_name, 'tbody').element(:tag_name => 'td').exists?
I also tried
#browser.select_list(:id, 'wikiActionMenuLink_dropdown').select_value('Delete Wiki')
but got error "unable to locate element, using {:id=>"wikiActionMenuLink_dropdown", :tag_name=>"select"}"
Below the html. Could someone give me some suggestions?
<div id="wikiActionMenuLink_dropdown" class="dijitPopup dijitMenuPopup" style="visibility: visible; top: 123.75px; left: 1592px; right: auto; z-index: 1000; height: auto; overflow: visible; display: none;" role="region" aria-label="dijit_Menu_2" dijitpopupparent="">
<table id="dijit_Menu_2" class="dijit dijitReset dijitMenuTab`enter code here`le lotusPlain dijitMenu dijitMenuPassive" cellspacing="0" tabindex="0" role="menu" widgetid="dijit_Menu_2" style="top: 0px; visibility: visible;">
<tbody class="dijitReset" data-dojo-attach-point="containerNode">
<tr id="dijit_MenuItem_15" class="dijitReset dijitMenuItem" tabindex="-1" role="menuitem" data-dojo-attach-point="focusNode" style="-moz-user-select: none;" aria-label="Edit Wiki " title="Edit settings of this wiki." widgetid="dijit_MenuItem_15">
<tr id="dijit_MenuItem_16" class="dijitReset dijitMenuItem" tabindex="-1" role="menuitem" data-dojo-attach-point="focusNode" style="-moz-user-select: none;" aria-label="Delete Wiki " title="Delete this wiki." widgetid="dijit_MenuItem_16">
</tbody>
</table>
<iframe class="dijitBackgroundIframe" src="javascript:""" role="presentation" style="opacity: 0.1; width: 100%; height: 100%;" tabindex="-1">
<html>
<head></head>
<body></body>
</html>
</iframe>
</div>
Watir will only return the text of an element if the text is currently visible, regardless of whether the element exists. If you made the same call in your first example with .present? instead of .exists? it would return false.
For non-select/option dropdown interactions, you usually need to click the dropdown element first, and then once the options are visible, click on the one you want.
I have few columns which was generated by dhtmlx's javascript. The column was generated on run time which means that if I tried to view the source code of the page using the Chrome's View Page Source, I won't be able to see the generated code. But I can see the generated code by right clicking on the element and select 'Inspect Element'. So here's a part of the generated code that I copy pasted from 'Inspect Element':
<div id="scheduler_here" class="dhx_cal_container dhx_scheduler_grid" style="width:100%;height:100%;">
<div class="dhx_cal_header" style="width: 1148px; height: 20px; left: -1px; top: 60px;">
<div class="dhx_grid_line">
<div style="width:169px;">Start Date</div>
<div style="width:169px;">Time</div>
<div style="width:169px;">Event</div>
<div style="width:169px;">Location</div>
<div style="width:169px;">Stakeholders</div>
<div style="width:169px;">Type</div>
</div>
</div>
<div class="dhx_cal_data" style="width: 1148px; height: 506px; left: 0px; top: 81px; overflow-y: auto;">
<div>
<div class="dhx_grid_v_border" style="left:184px" id="imincol0"></div>
<div class="dhx_grid_v_border" style="left:370px" id="imincol1"></div>
<div class="dhx_grid_v_border" style="left:556px" id="imincol2"></div>
<div class="dhx_grid_v_border" style="left:742px" id="imincol3"></div>
<div class="dhx_grid_v_border" style="left:928px" id="imincol4"></div>
</div>
<div class="dhx_grid_area"><table></table></div>
</div>
</div>
I'm trying to get the column width of imincol0, imincol1, imincol2 and so on which you can see at the last part of the code. I have tried few methods to get the width of the columns with these ids but to no avail. I'll always get null.
If you use jquery you could do this:
var x = $('#imincol0').width();
If you're using pure js you could try this:
var x = document.getElementById('imincol0').offsetWidth;
My html Code i have a button
<input class="search hidden" id="search_button" type="submit" value="Search" style="display: block;"></input>
when i clicked in Button many items is generated like this :
<div id="search_results" class="" style="display: block; left: 522.083px; top: 459.617px; width: 398px;">
<img alt="Load-circle" class="load-circle" src=".../123">
<div id="app_341446764" class="search-result"><img src=".../DictationIcon.png">abc</div>
<div id="app_561941526" class="search-result"><img src=".../Icon.png">def</div>
</div>
i have many div with class search-result i don't know how to click one of them(class="search-result") anyone suggest me a solution.
Ideally you would add a unique id as #juan-manuel-rodulfo-salcedo suggested. However, if you can't do that then you could find all the divs with class=search-result. Below is an example of how to click the second div on the page:
page.all('.search-result')[1].click
For more examples of how to select multiple elements, see this SO answer.
I am trying to write a test automation code and having a hard time finding an element using Xpath in the below structure.
<div id="270590-bar" class="chart-row clearfix" style="display: block;">
<div class="bar-col float">
<div class="bar-wrapper">
<div class="topic-name-wrapper" style="background-color: transparent;">Business</div>
<div class="bar" style="width:170px"></div>
</div>
<div style="float:left;position:relative; ">
<div class="level-dd-fake">Intermediate</div>
<select id="270590-level" class="level-dropdown level-select">
</div>
<div id="270590-un" class="topic unsubscribe" style="float:left; margin: 0px 0px 0px 1px !important;"></div>
</div>
There are several data rows which will use the same set of lines as above for each row.
When I give the value inside class="topic-name-wrapper" eg:- Business
I want to select the DropDown element at class="level-dropdown level-select"
Hope the question is clear and any help on this is really appreciated.
As far as I understand you need something like that:
//div[*[.='Business']]/following-sibling::div/select