Select Elements Using CSS Selector

ProWebScraper has its own Selector to select the elements that you would like to scrape from the website. You can simply click on each element on the page to select and extract. 

In some cases, elements you want to extract from the page is hidden or not selectable in a selector,

At that time you can use an alternative way: CSS selector or Manual Xpaths to select those elements on the page.

Here are a few cases where it might be necessary (or at least a lot more elegant) to use CSS selector or Manual XPath. This includes when...

• you can't select a specific element
• you need data, such as latitude and longitude, from a map where it isn't readily available
• hidden elements
• Select data from a drop-down list or undisplayed tab

If you are not familiar with XPath, then you will first want to start with a CSS Selector guide.

How to set CSS selector in scraper

To use CSS selector to select any element

• Go to Selector → Create a new column by clicking on the button Add New Column, then click the Column Options dropdown arrow and select Use CSS Selector.
• The Use CSS selector dialog box appears.

 

• Enter Selector: enter selector of the element you want to select.
• Enter attribute: enter attribute node of element node (this field is optional).
• Cancel: Closes screen and saves your CSS Selector.
• Apply: Applies your CSS Selector.

The following example demonstrates possible ways to select elements using CSS selectors.

Example: Scraping Rating from Star 

URL of page: https://www.yelp.com/search?find_desc=Restaurants&find_loc=San%20Francisco%2C%20CA

• Fill below details at Use CSS selector dialog box :
• Enter Selector : div.lemon--div__373c0__1mboc.attribute__373c0__1hPI_.display--inline-block__373c0__1ZKqC.margin-r1__373c0__zyKmV.border-color--default__373c0__3-ifU > div
• Enter attribute: aria-label