I want to click on the search auto complete BUTTON in a webmail application.
<button class="_n_r ms-bg-color-themeLight-hover o365button _n_s ms-bg-color-themeLighter ms-font-color-neutralPrimary ms-border-color-themePrimary" type="button" autoid="_n_4" aria-label="Activate Search Textbox">
<span class="_n_u owaimg ms-Icon--search ms-icon-font-size-20 ms-fcl-ts-b"/>
<span class="_n_t ms-font-weight-semilight ms-font-color-neutralPrimary">Search Mail and People</span>
When clicking the BUTTON, we get this INPUT
<input class="_is_x ms-font-weight-semibold ms-font-color-neutralPrimary ms-bg-color-themeLight ms-bg-color-themeLight-hover allowTextSelection textbox ms-font-s ms-fwt-sl ms-fcl-np ms-bcl-nta ms-bcl-nsa-h hideClearButton" autoid="_is_3" role="combobox" aria-autocomplete="list" aria-label="Search mail and people, type your search term then press enter to search."/>
I'm getting the following error while trying to use the class name from the input.
"The given selector _n_r ms-bg-color-themeLight-hover o365button _n_sms-bg-color-themeLighter ms-border-color-themeLighter is either invalid or does not result in a WebElement. The following error occurred: InvalidSelectorError: Compound class names not permitted"
We tried to use selenium IDE to fetch the value, but we are getting only the xpath. Is there any way to locate autocomplete search field with out using the xpath?
That's a LOT of classes on that INPUT. :) I would use a different attribute. I would start with one of these and see which one works for you. You didn't specify the language you are using so here's some code in Java.
driver.findElement(By.cssSelector("input[autoid='_is_3']"));
driver.findElement(By.cssSelector("input[aria-label='Search mail and people, type your search term then press enter to search.']"));
Quick note since you were asking about classes. You can go the classes route and use CSS Selectors to find them. A simple example.
<button class="one two">
You can find the BUTTON above using
driver.findElement(By.cssSelector("button.one.two"));
A period (.) indicates a CSS class so you would need a period before each class name. You don't necessarily need to include all the classes, only enough to make the element unique so you can locate it.
CSS Selectors reference
CSS Selectors tips
Related
writing a Python selenium script to auto-populate many forms. On one particular form, I have to add the entry, then click the "Add Another" button in order add the next entry. I successfully located the "Add Another" button via find.element(By.XPATH, xx), which works on the first two iterations with an xpath that looks like this:
//*[#id="7d977bf8-9863-5be0-ab89-c90cff57953d"]/div[3]/div[2]/div[2]/div/div[1]/div/div[2]/button[1]
But it is unable to locate the button on the third pass through. I found that the xpath changed ever so slighty: The index of the second /div in the path changed from "2" to "6":
//*[#id="7d977bf8-9863-5be0-ab89-c90cff57953d"]/div[3]/div[6]/div[2]/div/div[1]/div/div[2]/button[1]
My immediate reaction was to code for a NoSuchElementException and if the original is not found, search for the second. But given the observed behavior, I'm not sure I can be certain it's just those two Xpaths. I may need to "Add Another" 40 or 50 times, I could end up with a block of code that tries 10 or 20 xpaths (I am not a web developer, so I have no idea why this change of path is happening, or when it may happen again on the same Form).
So I'm trying to come up with another method to locate this button. Here is the HTML:
<button class="grid-button" data-bind="click: function() { imagetrend.formComposer.controlHandlers.grid.addAnotherButtonClickHandler($context) }, css: { 'disabled' : imagetrend.FormComposer.isReadOnly($context) }, disableEvent: { 'click': imagetrend.FormComposer.isReadOnly.bind(null, $context) }"> <i class="fa fa-lg fa-plus"></i> Add Another </button>
I don't see any unique element in there that I can search by given what I know about Selenium: Tag, ID, CSS_Selector...I tried locating by the "fa fa-lg fa-plus" class, but that isn't found (I think I've deduced that's for the large plug sign in the button).
So is there some sort of bulletproof way I can find this element without coding for every potential xpath I find along the way? Thanks.
I didn't find an alternate method to identify that element, but found that with only that second /div index changing, a wildcard character suited my needs.
so it ended up as:
driver.find_element(By.XPATH,'//*[#id="7d977bf8-9863-5be0-ab89-c90cff57953d"]/div[3]/div[*]/div[2]/div/div[1]/div/div[2]/button[1]').click()
And that XPATH matches any instance of the button that may pop up.
Thanks to Prophet and Akzy for keeping me on my toes!
The page contains a multi-select dropdown (similar to the one below)
The html code looks like the below:
<div class="button-and-dropdown-div>
<button class="Multi-Select-Button">multi-select button</button>
<div class="dropdown-containing-options>
<label class="dropdown-item">
<input class="checkbox">
"
Name
"
</label>
<label class="dropdown-item">
<input class="checkbox">
"
Address
"
</label>
</div>
After testing in firefox developer tools, I was finally able to figure out the xPath needed in order to get the text for a certain label ...
The below XPath statement will return the the text "Phone"
$x("(//label[#class='dropdown-item'])[4]/text()[2]")
The label contains multiple text items (although it looks like there is just one text object when looking at the UI) in the label element. There are actually two text elements within each label element. The first is always empty, the second contains the actual text (as shown in the below image when observing the element through the Firefox developer tool's console window):
Question:
How do I modify the XPath shown above in order to use in Selenium's FindElement?
Driver.FindElement(By.XPath("?"));
I know how to use the contains tool, but apparently not with more complex XPath statements. I was pretty sure one of the below would work but they did not (develop tool complain of a syntax error):
$x("(//label[#class='dropdown-item' and text()[2][contains(., 'Name')]]")
$x("(//label[#class='dropdown-item' and contains(text()[2], 'Name')]")
I am using the 'contains' in order to avoid white-space conflicts.
Additional for learning purposes (good for XPath debugging):
just in case anyone comes across this who is new to XPath, I wanted to show what the data structure of these label objects looked like. You can explore the data structure of objects within your webpage by using the Firefox Console window within the developer tools (F12). As you can see, the label element contains three sub-items; text which is empty, then the inpput checkbox, then some more text which has the actual text in it (not ideal). In the picture below, you can see the part of the webpage that corresponds to the label data structure.
If you are looking to find the element that contains "Name" given the HTML above, you can use
//label[#class='dropdown-item'][contains(.,'Name')]
So finally got it to work. The Firefox developer environment was correct when it stated there was a syntax problem with the XPath strings.
The following XPath string finally returned the desired result:
$x("//label[#class='dropdown-item' and contains(text()[2], 'Name')]")
In my case, there are some legacy web sites, in which not all the inputs have
id attribute properly set. Such as this:
<div class="form-group">
<label>Amount</label>
<input id="unreasonablename" type="text" value=""></input>
</div>
But human testers can still test it by typing amount value in the input right behind "Amount". I'd like to make web driver do the same thing:
webDriver.inputAfter("Amount", 100); //I do not want to use "unreasonablename" to find the input.
But how can I find the input element after the text "Amount"? Thanks.
There is a relative question here: In Selenium Webdriver, how to get a text after an element?. But I'm not familiar with xpath and do not know if my case can be solved in the same way.
To find the <input> element just after the text Amount you can use the findElement() method along with the Locator Strategy as follows :
webDriver.findElement(By.xpath("//label[contains(.,'Amount')]//following::input[1]"));
you can try following_sibling as
webDriver.findElement(By.xpath("//*[text()='Amount']/following-sibling::Input"));
try this :
driver.findElement(By.xpath("//label[text()='Amount']/following-sibling::input")).sendKeys("amount to be sent");
you can write some generic method like below. It can be used for all the required fileds by passing the label name and input value as argument
void enterInputAfterLabel(String labelname,String value){
driver.findElement(By.xpath("//label[text()='"+labelname+"']]/input")).sendKeys(value);
}
My Problem:
The Page I try to test with NightwatchJS Contains Some Input Fields that have the Same beginning, but a random number is added. I want to Fill the Textfield on the page. Only one with this name is present on the same time.
<input id="groupNamec7aed06a-67a1-4780-9cc3-5b985666adb9" class="d-styled-input" data-value-update="keyup" data-bind="value: name" title="">
Is the definition of the Field. groupName is every Time the same, but the number changes.
Is there a possibility to use CSS Selector in nightwatch instead of XPATH?
You can try this way :
input[id^="groupName"]
From MDN > Attribute selectors :
[attr^=value] : Represents an element with an attribute name of attr and whose first value is prefixed by "value".
Unfortunately CSS Selector does not provide such a way. You could use a different CSS Selector to match inputs with an id and get those as a list. Afterwards using getAttribute('id') you could do it manually, but this seems like unnecessary effort to me and I'd recommend just using Xpath.
Ofcourse you could try and get a different unique CSS Selector. If it's in a form you could locate the form and use :nth-child but if I remember correctly this has limited/no support in IE.
Edit Apparently IE9 and later does support :nth-child
while writing some acceptance tests for my webapp (playframework based),I got confused by the usage of some selenium commands.
In my html page,I have a submit button like this
<input type="submit" id="removecartitem" value="remove"/>
to locate this,I used
assertElementPresent(id='removecartitem')
however,this fails,
assertElementPresent id='removecartitem' false
The selenium documentation says
id=id: Select the element with the specified #id attribute.
but,if i simply put
assertElementPresent('removecartitem')
Then,the test is executed correctly.This is the source for confusion, since the default way is to select the element whose name attribute is 'removecartitem' ,and I haven't mentioned any name attribute in my html
Any idea why this happens?
It looks like you need to remove the single quotes according to the documentation you provided...e.g:
assertElementPresent(id=removecartitem)