i want to test a combobox (react-select) with cypress, i got this error, can anyone help me in that? or is there another way to choose an option from the react-select combobox and test it?
Timed out retrying after 4000ms: expected '<input#Land>' to have value 'Angola', but the value was ''
<div class=" css-1kszcc2-container">
<span id="react-select-2-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=" css-1oa51g-control">
<div class=" css-k02lgv-ValueContainer">
<div class=" css-1cgt3sd-placeholder">Land</div>
<div class=" css-aic2ap-singleValue">Angola</div>
<div class=" css-6j8wv5-Input" data-value="">
<input class="" autocapitalize="none" autocomplete="off" autocorrect="off" id="Land" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true" aria-controls="react-select-2-listbox" aria-owns="react-select-2-listbox" role="combobox" value="" style="color: inherit; background: 0px center; opacity: 0; width: 100%; grid-area: 1 / 2 / auto / auto; font: inherit; min-width: 2px; border: 0px; margin: 0px; outline: 0px; padding: 0px;">
</div>
</div>
</div>
</div>
onSubmitFormData.submitFirstFormData('Angola')
submitFirstFormData(land){
cy.get("[id^=Land]").type(land+"{enter}{enter}").should('have.value',land);
}
Reselect the input for the assertion. If there's a slow(ish) event handler, the way you have .should() chained off .type() my not be retrying the .get().
cy.get("[id^=Land]").type(land+"{enter}{enter}")
cy.get("[id^=Land]").should('have.value',land)
Related
This is my HTML:
<div ng-repeat="product in productsCurrency"
value="{{product}}"
style="margin-bottom: 0px;">
<div style="display: inline-flex; width: calc(100% - 10px);margin-bottom: 0px;height: 90px; padding-left: 10px !important;"
class="row"
ng-class="{'beacon_shipping_selected': $root.shippingMethod == (product.id + ''),
'beacon_padding_bottom': $root.isUsingDevice}">
<input checked
id="{{product.id}}"
type="radio"
name="shipping_method"
value="{{product.id}}"
ng-model="$root.shippingMethod"
style="align-self: center;">
<label for="{{product.id}}"
ng-class="{'beacon_margin_left': $root.isUsingDevice === false}"
style="margin-top: 28px; margin-left: 5px;">
</label>
<span style="margin-left: 10px; width: calc(100% - 120px);margin-bottom: 20px;">
<p class="beacon_text beacon_text_title beacon_shipping_title" style="font-weight: 400 !important;">
{{ product.name}}
</p>
<p class="beacon_text beacon_shipping_subtitle">
{{ product.description}}
</p>
</span>
<span class="beacon_text beacon_sum beacon_shipping_sum"
ng-class="{'beacon_shipping_sum_selected': $root.shippingMethod == (product.id + ''),
'beacon_sum_mobile': $root.isUsingDevice}">
{{unit.currencySymbol(product.currency) + roundPrice(product.price,1)}}
</span>
</div>
<div style="width: 100%; height: 1px; background: #979797;"
ng-class="{'beacon_remove_margin_divider': $root.isUsingDevice === false}">
</div>
</div>
I am using AngularJS and it goes through a list of products, and creates a div (view) for all of them.
Now I want the <input> that I have included in the div, to be selected when the user pressed on the view. How can I achieve this?
This is actually simple to achieve. You can use label for every product row and put content inside it as shown below.
It seems that you're trying to adjust a lot to create a product row with inline CSS styles. I suggest that you use CSS flexbox properties to achieve a predictable layout without doing a lot of width, height, margin related properties, only if you need further help on this.
angular.module('ExampleApp', [])
.controller('ExampleController', function($scope) {
console.log('ExampleController');
$scope.productsCurrency = [
{
id: 1,
name: 'Product 1'
},
{
id: 2,
name: 'Product 2'
},
{
id: 3,
name: 'Product 3'
}
]
});
.layout,
.layout-row,
.layout-column {
display: flex;
}
.layout-row {
flex-direction: row;
}
.layout-column {
flex-direction: column;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp" ng-controller="ExampleController">
<div ng-repeat="product in productsCurrency"
value="{{product}}"
style="margin-bottom: 0px;">
<label for="{{product.id}}" style="display: inline-flex; width: calc(100% - 10px);margin-bottom: 0px;height: 90px; padding-left: 10px !important;"
class="row"
ng-class="{'beacon_shipping_selected': $root.shippingMethod == (product.id + ''),
'beacon_padding_bottom': $root.isUsingDevice}">
<input checked
id="{{product.id}}"
type="radio"
name="shipping_method"
value="{{product.id}}"
ng-model="$root.shippingMethod"
style="align-self: center;">
<div for="{{product.id}}"
ng-class="{'beacon_margin_left': $root.isUsingDevice === false}"
style="margin-top: 28px; margin-left: 5px;">
</div>
<span style="margin-left: 10px; width: calc(100% - 120px);margin-bottom: 20px;">
<p class="beacon_text beacon_text_title beacon_shipping_title" style="font-weight: 400 !important;">
{{ product.name}}
</p>
<p class="beacon_text beacon_shipping_subtitle">
{{ product.description}}
</p>
</span>
<span class="beacon_text beacon_sum beacon_shipping_sum"
ng-class="{'beacon_shipping_sum_selected': $root.shippingMethod == (product.id + ''),
'beacon_sum_mobile': $root.isUsingDevice}">
{{unit.currencySymbol(product.currency) + roundPrice(product.price,1)}}
</span>
</label>
<div style="width: 100%; height: 1px; background: #979797;"
ng-class="{'beacon_remove_margin_divider': $root.isUsingDevice === false}">
</div>
</div>
</div>
I used a ng-click on the div like this:
HTML:
<div style="display: inline-flex; width: calc(100% - 10px);margin-bottom: 0px;height: 90px; padding-left: 10px !important;" class="row" ng-class="{'beacon_shipping_selected': $root.shippingMethod == (product.id + ''), 'beacon_padding_bottom': $root.isUsingDevice}" ng-click="selectInput(product.id)">
JS:
$scope.selectInput = function(input) {
$rootScope.shippingMethod = input;
};
My input watches $rootScope.shippingMethod, so it will change accordingly
i'm using a library called React Contexty, and it has a menu that is inside of the Contextify and is called of ContextMenu, when i do request for it to click in the Item of the ContextMenu, it click but the action not happens.
Cypress:
cy.get("img[data-test=img--menu-candidate]")
.click({
force: true
})
cy.get(".testinhoImg").click({
force: true
})
My MenuContext:
<ContextMenu id={`menu-${this.props.candidate.id}`} animation={animation.fade} theme={theme.light}>
<Item>
<div style={{ width: '50px', marginLeft: '0.5em', marginRight: '0.5em' }}>
<img src={ViewSrc} alt="View" />
</div>
<span className="ibm-plex-sans-serif-regular ibm-textcolor-blue-60"> View </span>
</Item>
Somebody know why? And help-me please?
HTML:
<div class="react-contexify react-contexify__theme--light react-contexify__will-enter--fade" style="left: 447px; top: 308px; opacity: 1;">
<div>
<div class="react-contexify__item" role="presentation">
<div class="react-contexify__item__data">
<div style="width: 50px; margin-left: 0.5em; margin-right: 0.5em;"><img src="/static/media/view.2844f64a.svg" alt="View"></div><span class="ibm-plex-sans-serif-regular ibm-textcolor-blue-60"> View </span></div>
</div>
<div class="react-contexify__separator"></div>
<div class="react-contexify__item" role="presentation">
<div class="react-contexify__item__data">
<div style="width: 65px;"><img src="/static/media/move.f7f8dc44.svg" alt="Move to folder" style="margin-left: 0.5em; margin-right: 0.5em;"></div><span class="ibm-plex-sans-serif-regular ibm-textcolor-blue-60">Move to folder</span></div>
</div>
<div class="react-contexify__item" role="presentation">
<div class="react-contexify__item__data">
<div style="width: 50px; padding-right: 1em;"><img src="/static/media/email.330dcb30.svg" alt="Send Email" style="padding-right: 1em;"></div><span class="ibm-plex-sans-serif-regular ibm-textcolor-blue-60">Send Email</span></div>
</div>
<div class="react-contexify__item react-contexify__item--disabled" role="presentation">
<div class="react-contexify__item__data">
<div style="width: 65px;"><img src="/static/media/remove-folder.d620c9fb.svg" alt="Move to folder" style="margin-left: 0.5em; margin-right: 0.5em;"></div><span class="ibm-plex-sans-serif-regular ibm-textcolor-blue-60">Remove from folder</span></div>
</div>
<div class="react-contexify__item" role="presentation">
<div class="react-contexify__item__data">
<div style="width: 50px; margin-left: 0.5em; margin-right: 0.5em;"><img src="/static/media/delete.e899d653.svg" alt="Delete" style="padding-right: 1.2em;"></div><span class="ibm-plex-sans-serif-regular ibm-textcolor-blue-60">Delete</span></div>
</div>
</div>
</div>
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" style="display: block; z-index: 1002; outline: 0px none; position: absolute; height: auto; width: 500px; top: 156px; left: 706px;" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-comment-dialog">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<div id="comment-dialog" class="ui-dialog-content ui-widget-content" style="background-color: white; width: auto; min-height: 0px; height: 208.267px;">
<div class="ui-resizable-handle ui-resizable-n"></div>
<div class="ui-resizable-handle ui-resizable-e"></div>
<div class="ui-resizable-handle ui-resizable-s"></div>
<div class="ui-resizable-handle ui-resizable-w"></div>
<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se" style="z-index: 1001;"></div>
<div class="ui-resizable-handle ui-resizable-sw" style="z-index: 1002;"></div>
<div class="ui-resizable-handle ui-resizable-ne" style="z-index: 1003;"></div>
<div class="ui-resizable-handle ui-resizable-nw" style="z-index: 1004;"></div>
<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
<div class="ui-dialog-buttonset">
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
<span class="ui-button-text">Edit Approved Data</span>
</button>
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
<span class="ui-button-text">Cancel</span>
i want to locate the "Edit Approved Data" button but gets an error always saying element not found.
//div[#class='ui-dialog-buttonset']/button
//div[#class='ui-dialog-buttonset']/button[1]
//div[#class='ui-dialog-buttonset']/button/span
//span[text()='Edit Approved Data']
//\*[text()='Edit Approved Data']
The way to use:
driver.findElement(By.xpath(xpath)).click();
Every presented xpath should work
I have a problem with displaying the reportviewer on the page under the platform DNN 7. Element is not visible but is initialized and loaded on the page.
MS VS2103.
Code of reportviewer
<tr>
<td style="vertical-align: top; width: 25%; height: 400px; display: none;"><div style="width:100%;height:100%;">
<span id="dnn_ctr1387_View_ReportViewer1_DocMap"><div id="dnn_ctr1387_View_ReportViewer1_ctl08" style="display:none;">
<input type="hidden" name="dnn$ctr1387$View$ReportViewer1$ctl08$ClientClickedId" id="dnn_ctr1387_View_ReportViewer1_ctl08_ClientClickedId">
</div></span>
</div></td><td style="display: none; width: 4px; padding: 0px; margin: 0px; height: 400px; vertical-align: middle; background-color: rgb(236, 233, 216);"><div id="dnn_ctr1387_View_ReportViewer1_ctl07">
<input type="image" name="dnn$ctr1387$View$ReportViewer1$ctl07$img" id="dnn_ctr1387_View_ReportViewer1_ctl07_img" title="Show / Hide Document Map" src="/Reserved.ReportViewerWebControl.axd?OpType=Resource&Version=11.0.3452.0&Name=Microsoft.Reporting.WebForms.Icons.SplitterVertCollapse.png" alt="Show / Hide Document Map" align="top" onclick="void(0);" style="cursor:pointer;"><input type="hidden" name="dnn$ctr1387$View$ReportViewer1$ctl07$store" id="dnn_ctr1387_View_ReportViewer1_ctl07_store"><input type="hidden" name="dnn$ctr1387$View$ReportViewer1$ctl07$collapse" id="dnn_ctr1387_View_ReportViewer1_ctl07_collapse" value="false">
</div></td><td style="height: 400px; vertical-align: top;"><div id="dnn_ctr1387_View_ReportViewer1_ctl09" style="height:100%;width:100%;overflow:auto;position:relative;">
<div id="VisibleReportContentdnn_ctr1387_View_ReportViewer1_ctl09" style="height:100%;display:none;"></div><div id="dnn_ctr1387_View_ReportViewer1_ctl09_ReportArea">
<div newcontenttype="Microsoft.Reporting.WebFormsClient.ReportAreaContent.None" fornonreportcontentarea="false" id="dnn_ctr1387_View_ReportViewer1_ctl09_VisibilityState" style="visibility:none;">
<input type="hidden" name="dnn$ctr1387$View$ReportViewer1$ctl09$VisibilityState$ctl00" value="None">
</div><input type="hidden" name="dnn$ctr1387$View$ReportViewer1$ctl09$ScrollPosition" id="dnn_ctr1387_View_ReportViewer1_ctl09_ScrollPosition"><span id="dnn_ctr1387_View_ReportViewer1_ctl09_Reserved_AsyncLoadTarget"></span><div id="dnn_ctr1387_View_ReportViewer1_ctl09_ReportControl" style="display:none;">
<span></span><input type="hidden" name="dnn$ctr1387$View$ReportViewer1$ctl09$ReportControl$ctl02"><input type="hidden" name="dnn$ctr1387$View$ReportViewer1$ctl09$ReportControl$ctl03"><input type="hidden" name="dnn$ctr1387$View$ReportViewer1$ctl09$ReportControl$ctl04" id="dnn_ctr1387_View_ReportViewer1_ctl09_ReportControl_ctl04" value="100">
</div><div id="dnn_ctr1387_View_ReportViewer1_ctl09_NonReportContent" style="height: 100%; width: 100%; display: none;">
</div>
</div>
</div></td>
</tr>
You'll want to track down why DISPLAY:NONE is set in the Style for the viewer. Did you perhaps not bind any data to it?
I have a filter working on the multi select but when I try what I saw on the following link it doesn't work:
https://docs.angularjs.org/api/ng/filter/orderBy
How do I get the sort to change by clicking on the glyphicon?
<div>
<label>Available</label>
<label style="float: right; position: relative; left: 141px;">Assigned</label><br />
<input type="text" ng-model="filterText" style="width: 50px; position: relative; left:-36px;"/>
<button style="position: relative; left: -30px;">Filter</button>
<div style="position: relative; top: 0px; left: 311px; float: left;">
<span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
<span class="glyphicon glyphicon-sort-by-attributes"></span>
</div>
<br />
<select id="available-groups" multiple>
<option value="{{group._id}}" ng-repeat="group in rbacGroups | filter:filterText">{{group.name}}</option>
</select>
<button id="addGroup" style="position: relative; top: -72px; left: 21px;">Add »</button><br />
<button id="removeGroup" style="position: relative; top: -72px; left: 375px;">« Remove</button>
<br />
<select id="assigned-groups" ng-model="cgroups" multiple required="required">
</select>
</div>
Change
ng-repeat="group in rbacGroups | filter:filterText"
to
ng-repeat="group in rbacGroups | filter:filterText | orderBy:'name':reverse"
and also change
<a href="" ng-click="reverse=!reverse;order('name', reverse)">...
<a href="" ng-click="reverse=!reverse;order('name', reverse)">...
to
<a href="" ng-click="reverse=false">...
<a href="" ng-click="reverse=true">...