Convert to CSS Selector - html

Trying to convert the below given HTML tag of a Image Button which I want to click but not getting clicked while using Xpath.
HTML Script
<img src="../../../../imagepool/transparent%21tmlservicedesk?cid=1"
id="reg_img_304316340" aralttxt="1" artxt="Show Application List"
arimgcenter="1" alt="Show Application List" title="Show Application List"
class="btnimg" style="top:0px; left:0px; width:23px; height:140px;">
Xpath Generated for the same:
//div[#class='btnimgdiv']/img[#id='reg_img_304316340']/#src
Read some of the articles that for image buttons CSS selector is much better than xpath and wanted to know how to convert the html to CSS selector.

Image BUtton which i want to click but not getting clicked while using Xpath
This is because you are using id attribute value of the element which looks like dynamically generated.
Read some of the articles that for image buttons CSS selector is much better than xpath
Yes, you are right, using cssSeector is much faster than xpath to locate an element.
wanted to know how to convert the html to CSS selector.
You need to use that attribute value which is unique and unchangeable to locate element, you can use below cssSelector :-
img.btnimg[title='Show Application List']
Reference Link :-
http://www.w3schools.com/cssref/css_selectors.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

Related

How to get a value from a website using html and VBA?

Here is a screenshot of the webpage I am searching:
Here is a snippet of the HTML code of that page:
I want to copy the value highlighted in yellow in the HTML code.
What I know to do in vba-html is to search for buttons and click them.
How can I access the value that is highlighted in yellow? I don't know how to do it because it is outside of a tag.
You can use the querySelector method of the HTML Document object to get to the parent element, and then you can use the Children property to get to the second child. Let's say that the object variable HTMLDoc has been assigned the html document, try...
HTMLDoc.querySelector("div.qmod-quote-element-paydate").children(1).innerText
Note that the index for the collection of children is 0-based.
From the snippet you provided, I think you should get the text using querySelector, getElementsByTagName and innerText.
Set PayValue = doc.querySelector("div.qmod-quote-element-paydate").getElementsByTagName("div")(2).getElementsByTagName("div")(0)
PayValue.innerText

Get Xpath for href from a tag based on span tag value

I am a beginner to xpath and I am unable to get XPath to get link from 'a' tag for below HTML code.
Get HREF value where span class value is "Upholstered" as shown in the snapshot.
Here, I want this value "/furniture/Bedrooms/Queen-Beds/_/N-8ddZ1z141u9?qf=styles_Upholstered" using Xpath.
Can you help me out please
According to your description the relevant XPath query to Get href value where span class value is "Upholstered will be something like:
//a[#class='Upholstered']/#href
However you forgot to add your actual HTML code (at least partial) so the above answer might not be 100% accurate.
Reference material:
XPath Language Specification
XPath Tutorial
Using the XPath Extractor in JMeter
Use below xpath to extract the URL of your <a> tag
//ul[#class='facetOptions']/li/a[#role='checkbox']/#href

Selecting href of link with image inside using xpath

I'm using scrapy to write a scraper that finds links with images inside them and grabs the link's href. The page I'm scraping is populated with image thumbnails, and when you click on the thumbnail it links to a full size version of the image. I'd like to grab the full size images.
The html looks somewhat like this:
<a href="example.com/full_size_image.jpg">
<img src="example.com/image_thumbnail.jpg">
</a>
And I want to grab "example.com/full_size_image.jpg".
My current method of doing so is
img_urls = scrapy.Selector(response).xpath('//a/img/..').xpath("#href").extract()
But I'd like to reduce that to a single xpath expression, as I plan to allow the user to enter their own xpath expression string.
You can check if an element has an another child element this way:
response.xpath('//a[img]/#href').extract()
Note that I'm using the response.xpath() shortcut and providing a single XPath expression.

css locator to navigate to parent tag from child and css locator to identify sub string in a attribute

I'm good at writing XPATH locators but for my new project i have to write locators using CSS
i have 2 doubts
1)
from the above code i have to identify div with id contains value "col3"
in xpath i can write //div[contains(#id,'col3')]
in css i tried below locators
css=#id:contains('col3')
css=div:contains(#id,'col3')
but none of them working.
please help me with CSS locator to identify id contains value "col3"
2)
i have to navigate from one attribute to its parent attribute.
i.e., from "Form tag i have to navigate ti its parent div tag"
in XPATH //form[#id='comment-form']/../
help me to navigate using CSS
Can you try this for 1st one
css=div[id*='col3']
The solution to your first problem is:
div[id*='col3']
Referring to Is there a CSS parent selector?, I do not think there is any solution for your 2nd problem. You might have to use xpath here.

How do I find a reliable XPath for this html element (type is text, class is known, no id present)?

The element is similar to:
<input type="text" class="information">
There is no id for the element.
There is only one text type element inside the information class. I want to be able to enter text into this html element by using casperjs which works on top of phantomjs.
The XPath obtained from chrome developer tools is similar to:
//*[#id="abcid"]/div/div[1]/input
abcdid is the id of the div element which comprises of the text box and a few other elements. But I need a more reliable XPath. I'm not very experienced with finding XPaths so forgive me if the answer is too obvious.
If you want to use XPath selectors for nearly all CasperJS functions, you need to provide it as an object. If the selector is provided as a string it will be automatically assumed that it is a CSS selector.
You can build the XPath selector object yourself:
{
type: 'xpath',
path: '//input[#class="information"]'
}
or just use a XPath utility by first requiring it at the beginning of your script and then using it:
var x = require('casper').selectXPath;
// later ...
var text = casper.fetchText(x('//input[#class="information"]'));
Regarding your selector:
If there is only one input with the information class then you can use the XPath
//input[#class="information"]
or the CSS selector
input.information[type='text']
If the input has other classes too, the CSS selector will work as is, but the XPath selector must be changed to
//input[contains(#class,"information")]