Iam unable to get the text value present under strong tag, as after a particular execution or task completion in browser tag gets change.
HTML Code before execution or task completion:
<div>
<strong>heizil</strong>:
<label id="check_label">
<em class="Highlight" style="padding: 1px; box-shadow: rgb(229, 229, 229) 1px 1px; border-radius: 3px; background-color: rgb(0, 191, 255); color: rgb(0, 0, 0); font-style: inherit;" match="test" loopnumber="385144110">Test</em> device testing - Android testing
</label>
HTML code after execution or task completion :
<a id="id_1008326" class="activity">
<strong>heizil</strong> :
<label id="check_label"> "device testing - Android testing"
</label>
using the following code line :
System.out.println(driver.findElement(By.xpath("//a[#class='activity'][contains(.,'Android testing')]/strong")).getText());
I'm getting desired result (heizil),but if i try to get strong tag text value before HTML execution or task completion iam getting no element exception.
Is there anyway we can print (heizil) text under strong tag using ' device testing - Android testing ' as this is the only text constant, irrespective of after execution or before execution.
Note : observed <div> tag before completion of task and after completion of task it changes to another HTML code, could you please help me getting textvalue inside strong tag using text ' device testing - Android testing '
Try with this xpath:
//label[#id='check_label']/preceding-sibling::strong
Or xpath with utilize contains function:
//label[contains(.,'Android testing')]/preceding-sibling::strong
I am writing automation UI tests for my web page using selenium.
I have an element on the web page which I am testing:
<< input type="checkbox" id="screening_questions[0].multiple_choice[0]-dealbreakerField" value="on" style="position: absolute; cursor: inherit; pointer-events: all; opacity: 0; width: 100%; height: 100%; z-index: 2; left: 0px; box-sizing: border-box; padding: 0px; margin: 0px;>
Since the element has id attribute, so I tried to locate it by using its id value but it didn't work.
If I search for that element in chrome console as:
$('#screening_questions[0].multiple_choice[0]-dealbreakerField')
I get the exception: Uncaught DOMException:
Failed to execute '$' on 'CommandLineAPI': '#screening_questions[0].multiple_choice[0]-dealbreakerField' is not a valid selector.
I thought it will be pretty straight forward to locate it given its id value. Could you please suggest what could be wrong here?
This error message...
Failed to execute '$' on 'CommandLineAPI': '#screening_questions[0].multiple_choice[0]-dealbreakerField' is not a valid selector.
...implies that the Locator Strategy you have adapted is not a valid selector.
As per the HTML you have shared the desired element is a <input> tag with type attribute as checkbox and to use the id attribute you have to escape the . characters and you can use either of the following options :
cssSelector :
"input[id=\"screening_questions[0].multiple_choice[0]-dealbreakerField\"][type='checkbox']"
xpath :
"//input[#id=\"screening_questions[0].multiple_choice[0]-dealbreakerField\"][#type='checkbox']"
I am writing automation UI tests for my web page using selenium.
I have an element on the web page which I am testing:
<< input type="checkbox" id="screening_questions[0].multiple_choice[0]-dealbreakerField" value="on" style="position: absolute; cursor: inherit; pointer-events: all; opacity: 0; width: 100%; height: 100%; z-index: 2; left: 0px; box-sizing: border-box; padding: 0px; margin: 0px;>
Since the element has id attribute, so I tried to locate it by using its id value but it didn't work.
If I search for that element in chrome console as:
$('#screening_questions[0].multiple_choice[0]-dealbreakerField')
I get the exception: Uncaught DOMException:
Failed to execute '$' on 'CommandLineAPI': '#screening_questions[0].multiple_choice[0]-dealbreakerField' is not a valid selector.
I thought it will be pretty straight forward to locate it given its id value. Could you please suggest what could be wrong here?
This error message...
Failed to execute '$' on 'CommandLineAPI': '#screening_questions[0].multiple_choice[0]-dealbreakerField' is not a valid selector.
...implies that the Locator Strategy you have adapted is not a valid selector.
As per the HTML you have shared the desired element is a <input> tag with type attribute as checkbox and to use the id attribute you have to escape the . characters and you can use either of the following options :
cssSelector :
"input[id=\"screening_questions[0].multiple_choice[0]-dealbreakerField\"][type='checkbox']"
xpath :
"//input[#id=\"screening_questions[0].multiple_choice[0]-dealbreakerField\"][#type='checkbox']"
How can I internationalize the button text of the file picker? For example, what this code presents to the user:
<input type="file" .../>
It is normally provided by the browser and hard to change, so the only way around it will be a CSS/JavaScript hack,
See the following links for some approaches:
http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
http://www.quirksmode.org/dom/inputfile.html
http://www.dreamincode.net/forums/showtopic15621.htm
Pure CSS solution:
.inputfile {
/* visibility: hidden etc. wont work */
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.inputfile:focus + label {
/* keyboard navigation */
outline: 1px dotted #000;
outline: -webkit-focus-ring-color auto 5px;
}
.inputfile + label * {
pointer-events: none;
}
<input type="file" name="file" id="file" class="inputfile">
<label for="file">Choose a file (Click me)</label>
source: http://tympanus.net/codrops
Take a step back! Firstly, you're assuming the user is using a foreign locale on their device, which is not a sound assumption for justifying taking over the button text of the file picker, and making it say what you want it to.
It is reasonable that you want to control every item of language visible on your page. The content of the File Upload control is not part of the HTML though. There is more content behind this control, for example, in WebKit, it also says "No file chosen" next to the button.
There are very hacky workarounds that attempt this (e.g. like those mentioned in #ChristopheD's answer), but none of them truly succeed:
To a screen reader, the file control will still say "Browse..." or "Choose File", and a custom file upload will not be announced as a file upload control, but just a button or a text input.
Many of them fail to display the chosen file, or to show that the user has no longer chosen a file
Many of them look nothing like the native control, so might look strange on non-standard devices.
Keyboard support is typically poor.
An author-created UI component can never be as fully functional as its native equivalent (and the closer you get it to behave to suppose IE10 on Windows 7, the more it will deviate from other Browser and Operating System combinations).
Modern browsers support drag & drop into the native file upload control.
Some techniques may trigger heuristics in security software as a potential ‘click-jacking’ attempt to trick the user into uploading file.
Deviating from the native controls is always a risky thing, there is a whole host of different devices your users could be using, and whatever workaround you choose, you will not have tested it in every one of those devices.
However, there is an even bigger reason why all attempts fail from a User Experience perspective: there is even more non-localized content behind this control, the file selection dialog itself. Once the user is subject to traversing their file system or what not to select a file to upload, they will be subjected to the host Operating System locale.
Are you sure you're doing your user any justice by deviating from the native control, just to localize the text, when as soon as they click it, they're just going to get the Operating System locale anyway?
The best you can do for your users is to ensure you have adequate localised guidance surrounding your file input control. (e.g. Form field label, hint text, tooltip text).
Sorry. :-(
--
This answer is for those looking for any justification not to localise the file upload control.
You get your browser's language for your button. There's no way to change it programmatically.
much easier use it
<input type="button" id="loadFileXml" value="Custom Button Name"onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>
I could achieve a button using jQueryMobile with following code:
<label for="ppt" data-role="button" data-inline="true" data-mini="true" data-corners="false">Upload</label>
<input id="ppt" type="file" name="ppt" multiple data-role="button" data-inline="true" data-mini="true" data-corners="false" style="opacity: 0;"/>
Above code creates a "Upload" button (custom text). On click of upload button, file browse is launched. Tested with Chrome 25 & IE9.
To make a custom "browse button" solution simply try making a hidden browse button, a custom button or element and some Jquery. This way I'm not modifying the actual "browse button" which is dependent on each browser/version. Here's an example.
HTML:
<div id="import" type="file">My Custom Button</div>
<input id="browser" class="hideMe" type="file"></input>
CSS:
#import {
margin: 0em 0em 0em .2em;
content: 'Import Settings';
display: inline-block;
border: 1px solid;
border-color: #ddd #bbb #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
font-weight: 700;
font: bold 12px/1.2 Arial,sans-serif !important;
/* fallback */
background-color: #f9f9f9;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C2C1C1), to(#2F2727));
}
.hideMe{
display: none;
}
JS:
$("#import").click(function() {
$("#browser").trigger("click");
$('#browser').change(function() {
alert($("#browser").val());
});
});
Actually, it is possible to customize the Upload File button with its pseudo selector: ::file-selector-button.
Check this for more info: MDN ::file-selector-button - CSS
How are widgets rendered in Dojo? What is the flow or sequence with which various JSs are called. I am trying to understand how the internal code is contructed for widget.
For example: If TabContainer is used , we can see the following code:
<div dojoattachpoint="containerNode"
class="dijitTabPaneWrapper
dijitTabContainerTop-container dijitAlignClient"
aria-labelledby="tabContainer_tablist_dijit_layout_ContentPane_0"
style="left: 0px; top: 28px; position: absolute; width: 748px; height: 335px;">
So how is Dojo constructing all these?
Many widgets use html templates. On top of the templates, various functions are triggered during the widget life cycle. There, you can manipulate the dom programmatically.
For information on how this is done, read the following links :
http://dojotoolkit.org/documentation/tutorials/1.6/templated/
http://www.sitepen.com/blog/2008/06/24/creating-dojo-widgets-with-inline-templates/
https://dojotoolkit.org/documentation/tutorials/1.6/understanding_widget/