Codementor Events

BDD Web Automation 08: Use Chrome Developer Tools

Published Sep 21, 2018Last updated Oct 09, 2018
BDD Web Automation 08: Use Chrome Developer Tools

This is the 8th post in a series, BDD Automation Test for Web UI. It mainly talks about how to write Web automation test script with Cucumber.js, a BDD test framework. You will be using Node.js as the programming language.

Content

  1. Device Mode
  2. Elements Locating
  3. Panels Overview

The Chrome Developer Tools (DevTools) is a set of web development and debugging tools built into Google Chrome that can be used to debug and analyze websites. When creating web automation test, we often need to use the DevTools to locate web page elements. Therefore, mastering Chrome DevTools is a requirement for creating selenium web automation test.

Open the Chrome Developer Tools

Here are three different ways to open DevTools:

  • Select More Tools > Developer Tools in the Chrome menu
  • Right click on the page element and select "Inspect"
  • Use the shortcut Ctrl+Shift+I (Windows) or Cmd+Opt+I (Mac)

Device Mode

Turn on device mode to simulate a mobile device. If you want to do automation on mobile website or responsive website, then you need to activate the device mode in the DevTools.

1.png

When Device Mode is turned on, this icon is blue. When Device Mode is off, this icon is grayed out.

You can also toggle Device Mode by pressing Command+Shift+M (Mac) or Ctrl+Shift+M (Windows, Linux). To use this shortcut, the mouse focus needs to be in the DevTools window.

Element Locating

Elements panel

2.png

Use the Elements panel to view the layout and design of the page, and can also manipulate the DOM and CSS of the page. In the process of web automation, Elements panel will be used very often, usually to locate the elements of the web page. The following is the description on how to locating the element.

Locate elements

There are two common ways to locate elements:

  • Locate elements through selectors

    1. After opening the Elements panel, click the element positioning button 0.png, then hover the mouse on elements on the page. You can see that when the mouse hover on an elements, the corresponding element will have the background color changed. As shown below, when the mouse is moved to “Contact Us”, the contact us element is appended with the corresponding background color.

3.png

  1. Once you find the needed element, click the element, then the element will show in DevTools. When the element is located, you can extract its information, such as id, name, className, XPath etc, and use them to automate the elements with selenium. The howto details will be explained in some future articles.
  • Operate directly on page elements

    Locate the element by right clicking it and then select "Inspect" menu item:
    4.png

Panels Overview

We already discussed Elements panel, which is the most important one for all automation engineers. We now take a quick look at other panels, which may also be used depends on the situations.

Console panel

During development, you can use the console panel to record diagnostic information or use it as a shell to interact with JavaScript on the page. For example, if web page is developed by yourself, you will use console.log to print out some information for troubleshooting. In the console page, you can also type a line of javascript code to interact directly with the page, for example, open Google search page, input a line of code on console panel, document.getElementsByName('q')[0].value="cuketest", and press Enter, you will see that the word “cuketest” is entered in the Google search page.

6.png

Source code panel

Set breakpoints in the Source panel to debug JavaScript, or set up a Workspace, so that changes you make in DevTools get saved to the code on your file system.

7.jpg

Network panel

Use the panel to understand the resource files requested and downloaded and optimize page load performance.

8.jpg

Performance panel

Use this panel to understand the runtime performance of your pages by recording and viewing various events that occur during loading and rendering of the site.

9.jpg

Memory panel

You can use the panel to tracking memory usage of the page, or sometimes to trouble-shoot memory leak problems with this panel.

10.jpg

Application panel

Use this panel to inspect local storage services used, incuding IndexedDB and Web SQL databases, local and session storage, cookies, application caches, images, fonts, and style sheets.

11.jpg

Security panel

Use the security panel to debug connection issues, certificate issues, and more.

12.jpg

Summary

As a web automation developer, you will be focusing mainly on the "Elements", "Console", "Source" panels. While the rest panel help you understand the web application better, and help trouble-shoot when problems occur during automation. In the next article we will talk in detail about how to locate elements.

See also:

Discover and read more posts from CukeTest
get started
post commentsBe the first to share your opinion
Show more replies