The current code has long HTML Xpath values that need to be converted & shortened to a css value:
driver.findElement(By.xpath("html/body/div[1]/div/div[2]/div/form/div[3]/div[2]/button")).click();
driver.findElement(By.xpath("html/body/div[1]/div/div[2]/div/form/div[3]/div[2]/button")).click();
You could possibly have chosen a better xpath expression than this one above. What you have done (without looking at the actual HTML code) is you have written down the complete xpath, is it possible to make it shorter / more robust?
Consider the following example:
<html itemscope itemtype="http://schema.org/QAPage">
<body class = "question-page new-topbar">
<div id="notify-container"></div>
<div id="topbar-wrapper"></div>
<button id="button1"></button>
</body>
</html>
You want to click on button1, you can find it using the complete xpath:
driver.findElement(By.xpath("html/body/div/div/button")).click()
or you can find it using xpath along this element's other attributes, in this case, its id.
driver.findElement(By.xpath("//button[#id='button1']")).click()
or as you wanted, you can use CSS selector:
driver.findElement(By.cssSelector('button[id='button1']')).click()
If you want us to help you with converting your xpath into css selector, you will need to copy and paste your html code in your question as well. Without looking at the actual code, we can not be 100% sure.
You may find the following link useful when trying to convert xpath into css selector.
https://www.simple-talk.com/dotnet/.net-framework/xpath,-css,-dom-and-selenium-the-rosetta-stone/
Related
screenshot.png
Hi All,
I am having a situation where a ::before in HTML code is pointing to asterisk (mandatory field) in HTML page. Please see attached screenshot.
HTML code:
<lightning-input-field class="customRequired abc">
::before
<lightning-picklist>
</lightning-picklist>
</lightning-input-field>
How to write xpath for ::before?
I think there is no straight forward solution instead use javascript :
querySelector takes css selectors
css_selector = 'lightning-input-field[class="customerRequired"]'
browser.execute_script("return window.getComputedStyle(document.querySelector('{}'),':before').getPropertyValue('content')".format(css_selector))
I'm trying to find an element by the text it contains, then check that that element also has a link to a particular place. I'm using selenium/java.
I'm trying to find elements by text when I can to minimise how many changes I will need to make if the UI is updated (reduce test maintenance costs).
I've tried the following, but the assert fails as the getAttribute ends up being null.
WebElement newsHeadlineTemplate = driver.findElement(By.xpath("//*[contains(text(), 'News Headline')]"));
Assert.assertEquals("Template not clickable", "/news/create/new", newsHeadlineTemplate.getAttribute("href"));
HTML for element I'm trying to find/use:
<div class="columns">
<div class="column is-one-third">
<p>News Headline</p>
</div>
</div>
I'm still fairly new to selenium so any help is very much appreciated.
Your XPath selector is a little bit wrong, you're matching <p> tag and you need to match the <a> tag which is the following-sibling for the <p> tag.
So you need to amend your expression to look like:
//p[text()='News Headline']/following-sibling::a
More information:
XPath Tutorial
XPath Axes
XPath Operators & Functions
I have a HTML File hierarchy in tree structure in a web page
as shown in picture.
The HTML code is
<div class="rtMid rtSelected">
< span class="rtSp"/>
< img class="rtImg" alt="Automation" src="http://192.168.1.6/eprint_prod_3.8/images/StoreImages/close_folder.png"/>
< span class="rtIn" title="Automation">Automation (1)</span>
</div>
In Selenium WebDriver is there a way to click on the Automation (1) link by searching only the text I don't want to use XPath reason is the location will be changing so is there a way to find it by its text and click on it.
XPath is powerful, you found it's unreliable you are not using it right. Spend some time at XPath Tutorial please.
This is a simple solution to your question, but there could be many other things you need to think about. E.g. matching title and text, etc.
driver.findElement(By.xpath(".//span[text()='Automation (1)']")).click();
CSS selector is also powerful and faster, more readable than XPath. But in your case, it doesn't support find by text.
searching by title worked well
driver.findElement(By.xpath("//span[contains(#title,'Automation')]")).click();
2 Approaches
Approach 1:
By Class Name:
Here we are having class Name for the Text Automation (1) that is rtIn.
Perform driver.findElement(By.className("rtIn")).click();
Approach 2:
By CSS Selector of Parent and Class Name
CSS Selector of Parent:.rtSelected
WebElement element1 = driver.findElement(By.cssSelector(".rtSelected"))
element1.className("rtIn").click();
Approach 3:
By Direct CSS Selector:
1. .rtIn
2. .rtSelected > .rtIn
It is better to use the second CSS Selector
driver.findElement(By.cssSelector(".rtSelected > .rtIn")).click();
My goal is to parse a block of HTML code like below to obtain the text, comments and replies fields as separate parts of the block:
<div id='fooID' class='foo'>
<p>
This is the top caption of picture's description</p>
<p>
T=<img src="http://www.mysite.com/images/img23.jpg" alt="" width="64" height="108"/> </p>
<p>
And here is more text to describe the photo.</p>
<div class=comments>(3 comments)</div>
<div id='reply13' class='replies'>
<a href=javascript:getReply('13',1)>Show reply </a></div>
</div>
My problem is that Selenium's WebDriver does not seem to support non-string identifiers in the HTML (notice that the class field in the HTML is 'foo' and as opposed to "foo"). From all examples that I have seen in both the Selenium docs and in other SO posts, the latter format is what WebDriver commonly expects.
Here is the relevant part of my Java code with my various (unsuccessful) attempts:
java.util.List<WebElement> elementList = driver.findElements(By.xpath("//div[#class='foo']"));
java.util.List<WebElement> elementList = (List<WebElement>) ((JavascriptExecutor)driver).executeScript("return $('.foo')[0]");
java.util.List<WebElement> elementList = driver.findElements(By.xpath("//div[contains(#class, 'foo')]"));
java.util.List<WebElement> elementList = driver.findElements(By.cssSelector("div." + foo_tag)); // where foo_tag = "'foo'".replace("'", "\'");
java.util.List<WebElement> elementList = driver.findElements(By.cssSelector("'foo'"));
Is there a sure way of handling this? Or is there an alternative, better way of extracting the above fields?
Other info:
I'm an HTML noob, but have made efforts to understand the structure of the HTML code/tags
Using Firefox (and, accordingly, FirefoxDriver)
Your help/suggestions greatly appreciated!
It's invalid HTML, so Selenium won't have a chance. You should fix it.
You will have a better chance with HTMLAgilityPack:
http://htmlagilitypack.codeplex.com/
It is a little better when it comes to badly formed (which this is) HTML.
Below is a SO post which a few different options for a few different languages, with tools like HTMLAgilityPack. You should find a suitable one:
Options for HTML scraping?
The problem is that the html specification doesnt know single quotes as far as I know. Therefore you don't have a problem with the Selenum webdriver, the problem is the html.
Do you have the chance to edit the html code?
how to get html source code which was rendered by a javascript in webpage. How can i proceed this? Using xsl or javascript or java.
Get entire HTML in current page:
function getHTML(){
var D=document,h=D.getElementsByTagName('html')[0],e;
if(h.outerHTML)return h.outerHTML;
e=D.createElement('div');
e.appendChild(h.cloneNode(true));
return e.innerHTML;
}
outerHTML is non-standard property thus might not supported in some browser (i.e., Firefox), in this case this function mimic the outerHTML feature by cloning the html node into unattached element and read it's innerHTML property.
Javascript provides
document.getElementByTagName('')
You can get any tag from this line. Moreover if you want to do any operation to this tag then assign any id to that tag. then you can use document.getElementById('') to do any operation on it.
These will give you source code.