# How to Easily Find XPath or CSS Selector in Major Browsers Source: PageCrawl.io Help Center URL: https://pagecrawl.io/help/tutorials/article/find-xpath-css-selector-in-chrome --- [Image: Quick Setup showing Specific Area monitoring with selector input] If you encounter a problem with PageCrawl'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 break.** Absolute selectors, on the other hand, are useful when tracking a large number of pages, and you are only interested in specific elements. However, with even a slight change in page layout, the selector will break. If an element is added or removed from a page, the absolute XPath will need to be updated to continue tracking the page contents. 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) ### Let PageCrawl pick the selector for you The easiest way is to not write a selector by hand at all. PageCrawl can generate a stable selector for you: * **Visual selector in the page editor** - when adding or editing a monitor, use the point-and-click visual selector to choose an element directly on a preview of the page. PageCrawl generates the selector for you. * **[PageCrawl browser extension](/help/features/article/browser-extension-guide.md)** - click the element you want to track right on the live page and send it straight into a new monitor, with a sensible selector already filled in. You can also ask an AI assistant like ChatGPT or Claude to write a CSS or XPath selector for a given element, then paste it in and use the **Test** button to confirm it. ### Generating Selectors by Inspecting the Page If you prefer to find the selector yourself, you can inspect an element in your browser's DevTools. 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. If you selected "Copy full XPath", it will copy the absolute XPath (Check in section above: Relative vs Absolute Selector). 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 > Settings > Advanced, and checking the "Show Develop menu in menu bar" option (called Preferences in older macOS versions). 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. --- Need more? The complete PageCrawl.io help center, with every article, is available as a single document at https://pagecrawl.io/llms-full.txt. Read it for context on anything this page does not cover.