{"id":421948,"date":"2019-01-22T09:38:49","date_gmt":"2019-01-22T09:38:49","guid":{"rendered":"https:\/\/nextgenlm.staging.wpengine.com\/?p=421948"},"modified":"2025-10-13T13:44:01","modified_gmt":"2025-10-13T18:44:01","slug":"preparing-for-browser-automation-by-using-web-developer-tools-to-identify-html-elements","status":"publish","type":"post","link":"https:\/\/www.logicmonitor.com\/fr\/blog\/preparing-for-browser-automation-by-using-web-developer-tools-to-identify-html-elements\/","title":{"rendered":"Preparing for Browser Automation by Using Web Developer Tools to Identify HTML Elements"},"content":{"rendered":"

Background<\/span><\/h2>

In a separate article, we introduced the concept of performing synthetic transactions with LogicMonitor. An obviously crucial step of that process is actually scripting the automation. You can have all the right automation tools installed but how do you get started with the actual script? This article will help illustrate some of the preparation needed for developing a browser automation script.<\/span><\/p>

Choose a Browser<\/span><\/h2>

You will need to choose a browser for visually inspecting a website and performing automation. While it makes sense to prioritize automated service testing through the same browser as most of your customers would, you should be able to get the same results visually inspecting a website’s elements in any popular browser.<\/span><\/p>

Consider browsers that are compatible with Selenium, a browser automation tool we’re using in our series of articles on executing synthetic transactions with LogicMonitor. Selenium offers webdrivers for some of the most popular browsers:<\/span><\/p>

  1. Mozilla Firefox<\/span><\/li>
  2. Google Chrome<\/span><\/li>
  3. Microsoft Internet Explorer<\/span><\/li><\/ol>

    While Firefox and Chrome generally render websites similarly, Internet Explorer is traditionally an outlier. If you can be flexible, consider starting with Firefox or Chrome.<\/span><\/p>

    Choose the Right Website<\/span><\/h2>

    Your first website choice for browser automation might not be the best choice. How can you tell? The largest factor is whether the webpage elements can be easily identified by an id or class name rather than an XPath. If none of that made sense to you, it’s okay. For now, choose a website but keep in mind that as you continue reading, you may discover it is not the most conducive to automation.<\/span><\/p>

    Keep Responsive Web Design In Mind<\/span><\/h2>

    Many modern websites are designed to adapt or respond, to various screen sizes in order to accommodate desktops, laptops, and handheld devices such as mobile phones. Sometimes web page elements rearrange themselves in order to fit smaller screen sizes. In some cases, elements disappear entirely! You want to keep window size in mind before you attempt to identify elements and automate browser activity.<\/span><\/p>

    One way to test responsiveness is to simply resize your web browser. In most cases, resizing your browser to 50% of the screen’s width will be enough to trigger a responsive design. Alternatively, those who are already familiar with browser web developer tools can use those options to simulate other device screen sizes.<\/span><\/p>

    Locating Web Page Elements<\/span><\/h2>

    The Challenge<\/span><\/h3>

    Consider the login form illustrated below.<\/span><\/p>

    \"\"<\/figure><\/div>

    Visually, it is obvious what actions you would take to use a login form: click the username field, type username, click the password field, type password, and click the login button. Without thinking, you visually locate the elements you need to use and take action. What about programmatically?<\/span><\/p>

    The Solution<\/span><\/h3>

    HTML elements can be located in many ways, three of which being:<\/span><\/p>