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.
Related
Below is the HTML snippet I am trying to get xpath. I have tried so many combination in chrome dev tools but no luck. Chropath message is that element might be from different src.
I am not sure what it means. Any help appreciated.
<input type="text" class="sn-global-typeahead-input -global-active-input" name="sncwsgs-
typeahead-input" id="sncwsgs-typeahead-input" placeholder="Search Global" autocomplete="off"
aria-label="Search" aria-hidden="false" aria-expanded="true" aria-activedescendant="sncwsgs-
typeahead-record-1-2" aria-autocomplete="both" aria-owns="sncwsgs-typeahead-sections" aria-
controls="sncwsgs-typeahead-sections" aria-describedby="sncwsgs-typeahead-instructions" aria-
haspopup="listbox" value="" role="combobox">
There's an id tag, so you can use the following for the XPath:
"//input[#id='sncwsgs-typeahead-input']"
That also translates to the following CSS Selector:
"input#sncwsgs-typeahead-input"
But if that's inside an iframe, you'll need to switch to the iframe first before you can interact with elements inside of it.
Learn about switching into iframes here: https://www.selenium.dev/documentation/webdriver/interactions/frames/
Example of switching into an iframe:
driver.switch_to.frame("iframe")
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
I'm facing an accessibility issue with Safari browser on tabbing. Anchor tags are not getting focus on tabbing.
I have checked with and without tabindex. Setting tabindex="0", but nothing changed, not sure this is a bug in Safari or not. Tested in other websites including https://www.microsoft.com , the same experience.
Safari Version 10.1.1 (11603.2.5)
Mac : OS X El Capitan
Button element is getting focus, only issue is with anchor tag
<a id="footer-linkedin-link" target="_blank" class="social-footer-icon" aria-label="Follow on LinkedIn" href="https://www.linkedin.com/"></a>
Any valuable inputs will help me. Thanks in advance.
You can't have an empty anchor tag - there's nothing to tab to. That's an HTML validation error so browsers may handle it differently. Without your CSS I'm not sure exactly what you should do, but I'm guessing you really want something like this:
<a target="_blank" href="https://www.linkedin.com/">
<span id="footer-linkedin-link" class="social-footer-icon" role="img" aria-label="Follow on LinkedIn" ></span>
</a>
The icon being inserted with CSS needs to be the content within the anchor, be properly cast as an image using role="img", and that should have the aria-label.
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');
In my testcase i have the next locater:
Double Click Element //input[#value='user1']
The locater is for the next snippet:
<tr onselectstart="listview_onselectstart(this, event)" tabindex="1" class="row altrow selected"><input class="text" type="text" tabindex="-1" readonly="readonly" style="width:;" value="user1">
This works perfect with Chrome and Firefox. When i try this with ie i see the page refresing and nothing happends.
Doesnt ie works with javascript ? Or what can be the problem ?
IE has a long-standing history of extremely poor performance when it comes to XPath selectors.
Please consider using CSS selectors if you intend to work with IE.
In your case, Double Click Element css=input[value=user1] should do the trick.