Writing xpath and CSS locator/path for Selenium Automated Test - xpath

I have the following HTML:
<input type="submit" style="-webkit-user-select:none;line-height:100%;height:30px" value="Advanced Search" class="jfk-button jfk-button-action adv-button">
I have written xpath as: //input[#value='Advanced Search']
What is the CSS locator/path?

It's difficult to answer as optimum search selectors need the entire source code to be written, as several DOM Elements in the document could be returned for a generic selector.
In this case, a more detailed selector would be :
input.adv-button[value='Advanced Search']

You can convert your xpath into corresponding CSS Locator by using the following website:
http://cssify.appspot.com/
For example:
Go to site http://cssify.appspot.com/
Insert the XPath //input[#value='Advanced Search'] into text field
Click submit button and observe the result
You can see the corresponding CSS Locator as follows:
input[value="Advanced Search"]

Related

Can't get xpath to locate element

I have this piece of HTML and I'm trying to select the <a href> link using xpath.
<li class="footable-page-nav" data-page="next" aria-label="next"><a class="footable-page-link xh-highlight" href="#">›</a></li>
I need the selector to be reasonably specific since "footable-page-link" exists in multiple places in the HTML.
I've tried this:
//li[#class='footable-page-nav']/a[#class='xh-highlight']//#href
Selenium throws an error: selenium.common.exceptions.NoSuchElementException
If I shorten the xpath expression to //li[#class='footable-page-nav'] just to see if I'm on the right track then I get
selenium.common.exceptions.ElementNotInteractableException: Message: element not interactable: element has zero size
What am I missing?
Try changing your xpath expression to
//li[#class='footable-page-nav']/a[contains(#class,'xh-highlight')]//#href
and see if it works.

I have doubts about two mappings on the site-prism

I don't want to use xpath on the elements below.
element :img_login, :xpath, '//[#id="main-wrapper"]/div/section/div/div[2]/div/div/div[1]/img'
element :msg_login_senha_invalidos, :xpath, '//[#id="main-wrapper"]/div/section/div/div[2]/div/div/div[2]/div/p'
They are on the page as follows:
element img_login
<div class="sc-jRQAMF eRnhep">
<img src="https://quasar-flash-staging.herokuapp.com/assets/login/flashLogo-3a77796fc2a3316fe0945c6faf248b57a2545077fac44301de3ec3d8c30eba3f.png" alt="Quasar Flash">
</div>
element msg_login_senha_invalidos
<p class="MuiFormHelperText-root MuiFormHelperText-contained Mui-error MuiFormHelperText-filled">Login e/ou senha inválidos</p>
You have asked multiple questions about converting from using XPath to some other type of selector when using Site-Prism. StackOverflow is meant to be a place to come, learn, and improve your skills - not just to get someone else to do your work. It really seems you'd be better off reading up on CSS and how it can be used to select elements. Also note that there's nothing specifically wrong with using XPath, per se, it's just the way people new to testing and selecting elements on a page tend to use it (just copying a fully specified selector from their browser) that leads to having selectors that are way too specific and therefore brittle. A good site for you to learn about the different general CSS selector options available is https://flukeout.github.io/ - and you can look at the built-in selector types provided by Capybara at https://github.com/teamcapybara/capybara/blob/master/lib/capybara/selector.rb#L18
In your current case the below may work, but with the HTML you have provided all that's possible to say is that they will match the elements shown however they may also match other elements which will give you ambiguous element errors.
element :img_login, :css, 'img[alt="Quasar Flash"]' # CSS attribute selector
element :msg_login_senha_invalidos, :css, 'p.Mui-error', text: 'Login e/ou senha inválidos' # CSS class selector combined with Capybara text filter

How to exclude particular class/atrribute name in CSS selector in Selenium Automation?

I have below HTML sample code:
<a href="" title="Design" class="reMode_design reMode_hover">
<span>Design</span>
</a>
<a href="" title="Design"
class="reMode_design reMode_hover reMode_selected">
<span>Design</span>
</a>
Here, i need to define CSS for the 1st href element and want to ignore 2nd element which has this class "reMode_selected". How to define css for the 1st element by ignoring 2nd element???
I don't want to use Xpath and I am looking for like this below CSS selector:
element :fld_link, "[title='Design'] [class !='reMode_selected']"
This format doesn't work in SitePrism Cucumber. Need Help on how to exclude a attribute name in CSS selector...
You can do this with cssSelector
driver.find_element(:css,".reMode_design:not(.reMode_selected)")
You can do with this css locator a[title='Design']:not([class*='reMode_selected'])
Have you tried using an xpath to locate the element? Perhaps something like: //a[contains(#title, 'Design') and not(contains(#class, 'reMode_selected'))]
References/Examples:
Using not in xpath
Using and in xpath
You can use the not: css prefix as others have mentioned or you could combine a capybara query to return the element based off it's text, or use a waiter.
SitePrism is quite advanced, so pretty much all options are open to you

Selenium: How to identify the button WebElement

On my webpage I have two buttons, how to identify which one is which?
<button onclick="addToSelected('newApplicationForm');">Add Strategy</button>
<button onclick="submitAddNewApplication('newApplicationForm');">Submit</button>
You say it's your webpage. Any chance you could put IDs to your elements? Would make it easier to identify them uniquely. If not, solution below.
You could use this XPath expression:
//button[contains(#onclick,"addToSelected('newApplicationForm');")]
Which will identify it by the javascript call, or you could try:
//button[.='Add Strategy']
^
|_ May need to be replaced by text()
Which will match the content.
For the submit-button, you could try the same principle with identifying by javascript:
//button[contains(#onclick,"submitAddNewApplication('newApplicationForm');")]
or by content:
//button[.='Submit']
Note: Some languages seem to use text() instead of the dot . to refer to the actual text in an element.

how do I assert that a hyperlink points to a given URL?

I am using Selenium IDE and Selenium RC to check links on a website, but I am having trouble finding a way to assert that a link points to a specified url and has the specified text.
Constraints:
locating the element by dom or xpath is not feasible for it will make the test brittle
there are multiple link elements with identical link text
The HTML:
link text
link text
The test I'd like to do (rspec):
page.is_element_present?("Href=path_y, Link=link text").should be_true
#locator parameters are in order of preference
Any ideas?
i guess get_attribute should help. you should get href from link, it is attribute.
You could use isElementPresent as follows:
assertTrue(selenium.isElementPresent("//a[text()='Example Link' and #href='http://www.example.com/']");
Given the following HTML:
<html>
<body>
<a id="myLink" href="http://www.example.com">Example Link</a>
</body>
</html>
You could use the following Selenium commands (using Java/TestNG, and Selenium 1.x)
assertEquals(selenium.getText("id=myLink#href"), "Example Link");
assertEquals(selenium.getAttribute("id=myLink#href"), "http://www.example.com/");
Using Selenium 2.x the example would be:
WebElement myLink = driver.findElement(By.id("myLink"));
assertEquals(myLink.getText(), "Example Link");
assertEquals(myLink.getAttribute("href"), "http://www.example.com/");

Resources