I'm using webdriverio for QA testing and need to change the selected value of a <select>. I am able to enter text in textboxes and click buttons etc just fine but, when I am unable to use browser.selectByValue() to change the selected option for a select on the page.
What seems to happen is the element beneath where the option appears is being clicked instead (the evidence for this is that the element underneath is a hyperlink and navigation occurs where the select's selected option should have changed.
I'm testing against Firefox 45 on Linux Mint with Selenium Standalone server 3.3.1 and geckodriver 1.5.0, webdriverio 4.6.2 and wdio-mocha-framework 0.5.9.
Edited to include HTML
I've changed the values/text but otherwise this is the exact HTML I'm testing against.
<select id="ember1268" tabindex="0" class="ember-view blue-background x-select">
<option id="ember1278" value="option1" class="ember-view x-option">Option 1</option>
<option id="ember1280" value="option2" class="ember-view x-option">Option 2</option>
<option id="ember1282" value="option3" class="ember-view x-option">Option 3</option>
<option id="ember1284" value="option4" class="ember-view x-option">Option 4</option>
</select>
Further edit
I just tested this again on Windows against Firefox 52 and it works as it should. I have a theory that the reason it fails in Linux is that it is running in a VM and running quite slowly. Could it be that the test is trying to click the option before it's actually appeared? If so, is there any way to add a delay to allow the option to appear?
Edit to include JS code snippet
This is the code I'm using to change the selection.
var clientSelect = browser.element('select');
clientSelect.selectByValue('option1');
Related
I am experiencing some performance issues in Vue after migrating from an old angularjs app.
The page displays a list of available reports with a settings button alongside each report.
Likewise each report has among other things a property called worksheet which indicates the name of the worksheet driving this report.
So for example something like this
<div class="list" v-for="(report,repidx) in filteredReports" v-show="hideDemo.indexOf(report.Name) == -1">
<h2>{{report.Name}}</h2><button #click="report.showsettings=true">Settings</button>
<div v-show="report.showsettings">
<select name="worksheet" v-model="report.worksheet">
<option v-for="worksheet in allworksheets">{{worksheet.Name}}</option>
</select>
</div>
</div>
When clicking on the settings button a dropdown list is exposed which indicates all the available worksheets that could be assigned to the selected report
"allworksheets" is an array of objects which might contain a 1000 worksheets.
Having it populated on the DOM (using v-for) for each report in the list does not seem efficient and causes tremendous performance issues on page loading and also during operations eg clicking on Settings button. (Surprisingly this worked perfectly fine in angularjs).
I tried switching to using a computed property but that also didnt help.
It gets even more complicated because the angular approach also had an additional option group which displayed SIMILAR worksheets to the currently selected one. For eg something like this
<select name="worksheet" v-model="report.worksheet">
<optgroup label="similarworksheets">
<option v-for="sm in similarworksheets(report.worksheet)">{{sm.Name}}</option>
</optgroup>
<optgroup label="allworksheets">
<option v-for="worksheet in allworksheets">{{worksheet.Name}}</option>
</optgroup>
</select>
In this case "similarworksheets" is a method that accepts the report.worksheet as a parameter and returns a filtered version of allworksheets, showing only SIMILAR worksheets. This obviously makes performance even worse!
Can someone suggest a better way to approach this given the fact that I need to stick to this structure - more or less - ie a dropdown list available for each selected report.
Thanks
I'm using Selenium Webdriver latest version and run the test on Chrome v69.0.3497.100.
When I execute script in my laptop, It working fine and click on the element but on desktop, it find element but can't click.
This is HTML of element:
<div class='col-sm-1'>
<div style="position: relative;margin-top: 19px;left:14px;" class="material-switch">
<input id="checkHiddenDevice" name="checkHiddenDeviceOption" type="checkbox">
<input id="checkHiddenDevice" name="checkHiddenDeviceOption" type="checkbox">
<label for="checkHiddenDevice" class="label-primary">
::before
::after
</label>
</div>
</div>
This is the Xpath:
//div[#class='col-sm-1']
I've also tried some xpaths like //label[#for='checkHiddenDevice'] or find element by CSS but it doesn't work. only xpath //div[#class='col-sm-1'] is working but in laptop only.
Then I try on KatalonRecorder Tool. When I put my Xpath and run, test case passed because it finds element but didn't click? Then I try to find Xpath by Katalon tool then Katalon generate this Xpath:
xpath=(.//*[normalize-space(text()) and normalize-space(.)='#of devices'])[1]/following::label[1]
But with this xpath it also can't find element (or I don't know how to change it to right xpath in my code)
Does anyone was faced with such problem?
Yes.. Even i have faced this issue, this issue might occur when the browser zooming is more than 100%. just execute the same scripts with 90% of browser zoom
Click Element is not working in Robot Framework, in the log.html it shows that it clicked on the element, but it does not actually happen in the browser.
The element which I want to click is:
<a href="http://www.twitter.com/intent/tweet?text=Orange%20named%20a%20Top%20Employer%20Global%202018%20for%203rd%20consecutive%20year&url=http%3A%2F%2Fintegration-ruby.proj.620nm.com%2Fen%2Fblogs%2Forange-named-top-employer-global-2018-3rd-consecutive-year&via=orangebusiness" class="share-button-twitter" target="_blank" title="Share on twitter">
<span class="fa-lg fa-stack text_black"> <i class="fa fa-circle-thin fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x"></i> </span>
</a>
I run my test using:
Execute JavaScript document.querySelector(".share-button-twitter").click()
Execute JavaScript document.querySelector('a[title="Share on twitter"]').click()
Execute JavaScript document.querySelector(".fa-lg fa-stack text_black").click()
Click Link //a[#title="Share on twitter"]
Click Element //i[#class="fa fa-twitter fa-stack-1x"]
Click Element //span[#class="fa-lg fa-stack text_black"]
The element is visible in the page, and the script works fine in Chrome and Firefox I find this issue with the browser IE.
What can be the reason for this? Any idea to solve the problem?
Update your Internet Explorer to the latest version. And also download the appropriate supported version of IEDriver for that version of IE. The problem is only here, and no where else.
The issue is this:
In my APP, I need to knw if a SELECT element is visible or not in the DOM under the MATERIALIZE framework. (Please do not mark this question as already discussed in here until you read it until the end.
So far I have been using document.getElementById('xx').offsetParent!==null to check that, and it has worked fine for me so far.
However, since I migrated my HTML code to Materializecss, my visiblity checking function does not work anymore.
This piece of code works perfectly in pure HTML
<div class='input-field col s12'>
<select name='V18' id='V18' />
<option value='' disabled selected>Select</option>
<option id='V18_1' value='1'>Choice 1</option>
<option id='V18_2' value='2'>Choice 2</option>
<option id='V18_3' value='3'>Choice 3</option>
</select>
</div>
<script>
if
(document.getElementById('V18').offsetParent!==null){
alert('Select is visible');
}else{
alert('Select is NOT visible');
}
</script>
Once I initialize the Selects in Materialize css, by calling the function $('select').material_select(), my visibilty checking function does not work anymore.
I have already tested all the options discussed on these links, and none of them work for Materialize selects:
Check if element is visible in DOM
How do I check if an element is hidden in jQuery?
My, question is...How can I check if a SELECT element is visible or not within the Materialize Framework? Seems that after initializing the selects, they loose some critical Javascript properties, somehow.
Does anyone have the same problem?
The workaround that I found for materializecss was to treat selects in a different way from radion buttons and texts,
For selects I detect visibility by using: window.getComputedStyle(element)).display === 'none'
For the rest kind of elements I detect visibility by using: "document.getElementById(element).offsetParent!==null"
I have the following code in my index.html
<li>
<select name="cmbtype" style="display:none" id="cmbtype" onChange="Changetype()">
<option value="0">
<input type="image" src="images/ocean.png" value="Play" onclick="previewplay(); " />
</option>
</select>
</li>
In firefox, opera and IE 7 I see the ocean.png and am able to click it. When I do, it accordingly plays the mp3 it is supposed to!
When I load this same code in Safari (Windows and Mac), as well as in Chrome the ocean.png is not seen and there is no button to click?
Is there something I can add or do to get this code/design to work in Safari and Chrome?
Thanks
Why do you have the input in your select?
It probably inherits the display: none therefor not getting rendered, which I would assume would be the correct behaviour.
Maybe IE, firefox and opera finds it illegal syntax and rewrite the input outside of the select, but webkit does not.
It is illegal HTML markup and not supposed to work.
<li> stands for list item and must be inside an <ol> (ordered list) or <ul> (unordered list)
<select> can have <optgroup> and <option>
<option> can have characters but no element
In this case Chrome and Safaris way of doing it is the correct way to do it.