If that fails, try the XPath expression strategy.The following guide on web scraping with JavaScript and Node.js will enable you to scrape virtually any page. Try the CSS selector strategy first (typically simpler and also faster to execute). The easier it is to target elements in your application, the easier it is to automate. They also assist with automated testing efforts. ![]() These rarely change, and they avoid issues with text labels since those might change quite often. If the application you are automating is under your control, try to add static id and name attributes, or well-named CSS classes to your elements. The automatic locator extraction works well when the element has an id attribute (assuming the value of the attribute does not change). Still, you want to use the most robust version you can to avoid your robot breaking whenever the application changes even just a bit. ![]() Some of the automatically detected locators might be good enough. It is recommended to select and fine-tune locators manually. The user name is inside a child element of the parent tweet element, a perfect use case for the XPath expression strategy. See the Web scraper robot for an example where an XPath expression is used to find tweet elements by the text they contain (user name). Traversing to the parent element is not currently supported by the CSS specification. CSS works only for cases where you select a specific element or a child element. XPath works, for example, in cases where you need to select the parent of a child element. XPath is useful in cases where the CSS strategy does not work. Use cases for the XPath expression strategy Neither of these XPath expressions is as robust as the id or name attribute CSS selectors. Chrome's XPath expression reads: "The first button element under a parent element that has an id attribute with the value of locator-example.". Chrome does a better job here (if we consider it better as in "more robust for our use case"). This type of expression will break easily, as any HTML structure changes will cause the expression to fail. We could modify the CSS selector like this to use the value of the name attribute:Ĭlick Button Analyzing the XPath expressionįirefox provides the full XPath from the root html element to the button. The name attribute used with many form elements does not have to be unique but is often good enough for automation purposes. Locating an element using the id attribute is thus a good option (assuming the value is static and does not change dynamically). An id attribute must have a unique value in the whole HTML document. Good candidates for robust selectors are the id and name attributes of HTML elements. For example, your robot breaks if someone decides to change the text on the button or translates the text into other languages.Ī good selector is one that is unlikely to break often. Locating elements by things that might change, such as their exact position or label, can cause your robot to break easily. Time to move to other querySelector strategies? Not yet. There is no way to locate the button using the button text ( That button!) if we want to continue using CSS selectors. Moving your mouse cursor over the HTML markup in the inspector highlights the corresponding elements in the browser window. Right-click on the That button! button and select Inspect Element (Firefox) or Inspect (Chrome). When you use the VS Code plugins or Automation Studio, the locators get saved in the locators.json file.įor CSS, the target of the locator is defined using a CSS selector, while XPath uses an XPath expression. Locators are the common name for finding elements using the different strategies, such as XPath and CSS. ![]() Those tools provide developers with great powers, such as inspecting the HTML elements on a web page. You can use a desktop browser, such as Firefox or Chrome, or some other browser, as long as it comes with developer tools. To understand what the robot sees, let's take a look at how the above buttons are built. To click the ( That button!) button, you shout an order at your robot, and it will complete this trivial task, right? As it turns out, it's not quite that simple. ![]() □ ERROR: " That button! Right there!" NOT FOUND □♀️ Hey, Robot! Click that button for me, will you? How to find user interface elements using locators in web applications A "simple" request
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |