If you encounter a problem with pagecrawl.io's visual selector and are unable to open the page you are trying to access, there is another option you can try. You can manually copy the selector by opening the desired page in your preferred web browser. This manual method may be more time-consuming, but it can provide a reliable solution if the visual selector is not functioning properly. Additionally, by manually copying the selector, you can have greater control over the elements on the page and the data you want to extract.

This guide will show you how to do it quickly and easily for Chrome, Firefox and Safari browsers.

XPath vs CSS Selector: Which One to Choose for Tracking?

When it comes to web scraping, finding the right element on a webpage can be a challenge. This is where expression languages like XPath and CSS Selector come in handy. These two powerful tools help you locate elements on a webpage, and choosing between them can be difficult.

Understanding XPath and CSS Selector

CSS Selectors are favored by many web developers as they are easy to learn if you already know CSS syntax. On the other hand, XPath Selectors offer greater power and flexibility, such as the ability to find elements that contain specific text. However, the learning curve for XPath can be steeper.

For those just starting out, CSS Selectors are the recommended choice due to their simplicity and versatility. Most advanced selectors can be written in CSS, making it a good option for web scraping beginners.

Relative vs Absolute Selector

When it comes to CSS and XPath Selectors, there are two ways to generate them: relative and absolute.

Relative selectors are preferred in most cases, as they are less prone to change. If an element is added or removed from a page, the absolute XPath will need to be updated to continue tracking the page contents. Absolute selectors, on the other hand, are useful when tracking a large number of pages and you are only interested in specific elements.

Relative selectors tend to be short, while absolute selectors can be lengthy. Here are some examples of relative and absolute selectors for both CSS and XPath:

• Relative XPath selector: ///h2[@id='get-started']//span[1]
• Relative CSS selector: h2[id='get-started'] span
• Absolute XPath selector: //*[@id="root"]/section/section/main/div/main/div/div[5]/div/div/div/div/div[1]/div/table/tbody/tr[20]
• Absolute CSS selector: #root > section > section > main > div > main > div > div:nth-child(6) > div > div > div > div > div.ant-table-container > div > table > tbody > tr:nth-child(20)

Generating Selectors with a Browser Extension

There are multiple browser extensions available that can help you copy CSS or XPath Selectors. Two options that we tried and can recommend include "SelectorsHub" and "SelectorGadget".

• SelectorsHub is a browser extension available for all browsers that allows you to right-click on an element and copy the "Relative XPath selector" or "Relative CSS selector."
• SelectorGadget, on the other hand, is only available for Chrome and offers a visual selector that allows you to click on elements and see the generated selector.

Generating Selectors Without a Browser Extension

If you prefer not to use a browser extension, you can also find CSS or XPath Selectors by inspecting an element. In most cases, you will get an absolute selector, and if the page content changes, you will need to update the selector.

In conclusion, choosing between XPath and CSS Selectors for web scraping comes down to your personal preference and level of experience. Both offer powerful tools for locating elements on a webpage, and with a little practice, you can become an expert in no time!

Steps to Find XPath or CSS Selector in Chrome Browser:

1. Right-click on the element on the web page you want to select.
2. Choose the "Inspect" option from the context menu.
3. The "Elements" tab in the DevTools window will open, displaying the HTML code for the page.
4. Right-click on the HTML code for the element you want to select and choose "Copy" from the context menu.
5. Choose "Copy XPath" or "Copy selector" to copy the XPath or CSS selector for that element.
6. Paste the generated selector in PageCrawl.io Tracked Element field.

Steps to Find XPath or CSS Selector in Firefox Browser:

1. Right-click on the element on the web page you want to select.
2. Choose the "Inspect Element" option from the context menu.
3. The "Developer Tools" window will open, displaying the HTML code for the page.
4. Right-click on the HTML code for the element you want to select and choose "Copy XPath" or "Copy CSS Path" from the context menu.
5. Paste the generated selector in PageCrawl.io Tracked Element field.

Steps to Find XPath or CSS Selector in Safari Browser:

1. Enable the "Develop" menu in Safari by going to Safari > Preferences > Advanced, and checking the "Show Develop menu in menu bar" option.
2. Right-click on the element on the web page you want to select.
3. Choose the "Inspect Element" option from the context menu.
4. The "Web Inspector" will open, displaying the HTML code for the page.
5. Right-click on the HTML code for the element you want to select and choose "Copy XPath" or "Copy CSS Path" from the context menu.
6. Paste the generated selector in PageCrawl.io Tracked Element field.