I have a requirement where HTML elements have following structure.
<div class="user">
Name
Logout
</div>
I want to click on first element using css selector.
I am using Behat 3 for automation.
You can do it in multiple ways, one of them is to use the existing step:
I follow "Name"
Another way is to find the element and use the click() on it, or to create a custom step that clicks on the element by selector, for example using css selector I click ".user a"
Related
I have a button displayed on the browser with the following tag which doesn't have ID or a single CSS class name. How can I find the Webelement and add a click to this button.
<button aria-describedby="notes" aria-label="Notes" autofocus="" class="btn btn-primary" role="dialog" type="button">OK</button>
Web elements can be located by XPath or CSS Selectors based on any unique combination of any attribute values or / and tag names and also based on their parent or child elements.
Since you didn't share the entire HTML of that page we can only guess about the correct unique locator for that element.
With XPath it can be something like:
"//button[text()='OK']"
Or
"//button[#aria-label='Notes']"
In CSS Selector style it will be
"button[aria-label='Notes']"
Consider locating the Element by Tag Name. Go to the parent element which has a id or class name and get subelements by tag name (parentelement.find_element_by_tag_name('button')) which is your button
Besides that, the button in your example has two classes.
You click on a button via the .click() command.
I have been using Robot Framework for a couple of days now to automate some basic flows tests in my working web app and found a problem:
Can't find some web elements using the id locator
I've been using the SeleniumLibrary for this. Tried with different locators such as xPath and CSS selector, setting an implicit wait before looking for the element and the keywords Wait Until Page Contains Element and Wait Until Element Is Visible, but still it gives the same result.
First of all I check if a certain element is present:
Page Should Contain Element id=some-button
then I try to send some keys to an input:
Input Text id=some-input Some characters
and then I get the error Element with locator 'id=some-button' not found
The page has the following structure:
...
<body>
<div>
...
<div>
<form>
<div>
<button id=some-button />
</div>
<div>
<!--- 8 opening div tags -->
<input id=some-input />
<!--- 8 closing div tags -->
</div>
</form>
</div>
</div>
</body>
...
Does any one have any idea why it happens?
UPDATE:
Tried
/html/body/div/div[1]/form/div[2]/div[1]/div[2]/div[2]/div[2]/div/div[1]/div[1]/div/input
instead of
//*[#id="some-button"]
and that worked perfectly.
What could be a reason for not finding a web element by its id?
These are the reasons I can think of off the top of my head:
the element truly isn't on the page at the time you're looking for it. This could be because you aren't waiting for the page to finish rendering, or it could be that it's genuinely not there.
you could have a typo in the id
the element is in a frame
the element was there, but then got deleted by some executing javascript
Whenever you're using any Xpath or a CSS selector, you should always check in it in Chrome Developer tools.
Steps:
1. Right click the page and click 'Inspect'
2. Go to Console tab
3. If it is a XPath evaluate using: $x and if it is a CSS selector, evaluate using $$
e.g.For
Xpath:
$x("//input[#id='Username']")
CSS:
$$("#Username")
Is it possible for behat to find an element by class name to click on? It looks like only the following is searched for: id|name|title|alt|value
For example, how could you successfully identify this element to click on?
<a class="button medium round signup" href="http://link.com" data-reveal-id="signupModal">sometext</a>
Also here is a simple page with a button, that has an ID. How come the following does not access the button?
<button id="myBtn" type="button" onclick="myFunction()">Try it</button>
Given I am on "http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_button_form"
When I press "myBtn"
Thanks
The button can not be accessed because it is contained in an iframe, you need to switch to that iframe to make the button available.
You can create steps to click on an element by any type of identifier (class included), or you can implement new step that requires css/xpath selectors.
Here you can find an example of a method to click by selector.
The first HTML code is nothing but a HREF. Behat should be easily able to identify it by using the line below:
Given I follow "sometext"
If the above doesn't work, you can simply use the CSS selector and click the element:
$locator = '.';
$this->getSession()->getPage()->find('css',$locator)->click();
I am stuck here. I am trying a write Xpath for the following. I am trying to click "Browse". The ID is changing every time.
I have tried this as my Xpath:
//*[#id='ext-gen43']/em/span/span
<a id="ext-gen43" class="x-tab-right" href="#">
<em class="x-tab-left">
<span class="x-tab-strip-inner">
<span class="x-tab-strip-text ">Browse</span>
</span>
</em>
</a>
XPATH WRITING PLUGINS :
Inorder to write xpath's by yourself you must first install firebug
and firepath plugins, they are the plugins available for Firefox
browser.
You can also install xpath checker which is another plugin available for firefox. It's a awesome plugin because you can actually
see the UI elements in the xpath checker as you are writing the
xpath.
EXAMPLE :
Inorder to write xpath's by yourself you must following the child and parent hierarchy available in the HTML tab in firebug.
STEPS :
Hover on the element you want to write xpath for using the small blue arrow available in the firebug toolbar in the top left corner.
Now click on the element, you would observe that the tag for the respective element in the firebug is highlighted.
Say your tag looks like :-
<label> class="control-label col-sm-3" for="name"> Your Name <label>
So the xpath for respective tag would be :-
//label[#class="control-label col-sm-3"]
So the above xpath specifies //parent tag which is label and into the bracket we should specify the locator, locator can be id, class, name anything.
And in your case the xpath would be :-
//span[#class="x-tab-strip-text"]
Have You tried copy xpath for given element in your browser(check element -> copy xpath)?
Then delete id and check once again.
It should be easy if you know how to select element by xpath with given class.
Try to use firepath to get xpath. It`s addon for FireFox https://addons.mozilla.org/uk/firefox/addon/firepath/
All the elements in the application which i am testing have dynanic ID's . The test always passes when i replay it without refreshing the page but as soon as i refresh the page, The Test Fails because Id's of all the elements changes randomly and selenium cannot match the recorded id's with the new ones .
I tried to use Xpath-position, It works for some objects but in case of Dropdown list and Buttons, it dosent work!
Can anyone please tell me how to find the Xpath (Meathods in JAVA or S*elence*) of an object OR How to create a new Locator Finder for Dropdown list and Buttons
I can show the properties (Inspected by Firebug) of the dropdown which is teasing me.
properties of Dropdown :
<div id="ext-gen1345" class="x-trigger-index-0 x-form-trigger x-form-arrow-trigger x-form-trigger-last x-unselectable" role="button" style="-moz-user-select: none;"></div>
properties of Dropdown*Choice*:
<ul>
<li class="x-boundlist-item" role="option">Rescue</li>
</ul>
Please search before posting, I have been answering this over and over.
ExtJS pages are hard to test, especially on finding elements.
Here are some of the tips I consider useful:
Don't ever use dynamically generated IDs. like (:id, 'ext-gen1345')
Don't ever use absolute/meaningless XPath, like //*[#class='someclass']/li/ul/li[2]/ul/li[2]/table/tbody/tr/td[2]/div
Take advantage of meaningful auto-generated partial ids and class names. (So you need show more HTML in your example, as I can make suggestions.)
For example, this ExtJS grid example: (:css, '.x-grid-view .x-grid-table') would be handy. If there are multiple of grids, try index them or locate the identifiable ancestor, like (:css, '#something-meaningful .x-grid-view .x-grid-table'). In your case, (:css, '#something-meaningful .x-form-arrow-trigger')
Take advantage of button's text.
For example, this ExtJS example: you can use XPath .//li[contains(#class, 'x-boundlist-item') and text()='Rescue']. However, this method is not suitable for CSS Selector or multi-language applications.
The best way to test is to create meaningful class names in the source code. If you don't have the access to the source code, please talk to your manager, using Selenium against ExtJS application should really be a developer's job. ExtJS provides cls and tdCls for custom class names, so you can add cls:'testing-btn-foo' in your source code, and Selenium can get it by (:css, '.x-panel .testing-btn-foo').
Other answers I made on this topic:
How to find ExtJS elements with dynamic id
How to find unique selectors for elements on pages with ExtJS for use with Selenium?
How to click on elements in ExtJS using Selenium?
Using class names in Watir
how to click on checkboxes on a pop-up window which doesn't have name, label
I would suggest you build a xpath from any of the parent of your DIV. you may get messed if there is no immediate parent node has such one.
example,
//*[#id='parentof div']/div
//*[#class='grand parent of div']/div/div
i did even something like this,
//*[#class='someclass']/li/ul/li[2]/ul/li[2]/table/tbody/tr/td[2]/div
But still, its not encouraged to do so.