Identify for Web

This is a short guide that will show you how to find selectors for web applications.

Inspect Tool - Developer Tools

To identify selectors on our supported web browsers we will use the browser Developer Tools. From here we will refer the Developer Tools as Inspect.

Before this guide

This guide assumes that you will use our asset application, but the process is the same for any web application.

920B

WebAssets.zip

archive

Web Application

The images used on this guide were using the Firefox browser.

Open the Inspect

Here are the links to open the inspect for each browser:

• Chrome

• Firefox

• Edge

• Internet Explorer, press F12 key.

Finding my Element

Once the browser starts go to your application on the web or enter the local path. Once you open the Inspect it will show like this:

Firefox Inspect on Web application

The Inspect will show the DOM of you tested application. You can search the elements through the DOM, but this can be not very easy in most cases. An easier way to locate a component is by right-clicking it and then using the Inspect option. This action will focus on and highlight the selected component in the Inspect.

Selected component focus on and highlight in Inspect

Element Information

You have to look for the selector of the container of our control and take note of its tag and attributes. This is the information that QualityMate will use to find the element.

Tags and Attributes

Creating Selector

You will primarily focus on these 3 properties when creating a selector for web applications:

• Tag

• Id attribute

• Class attribute

Code Example

An example to bind elements with the common selectors using our application would be like the following:

using Mobilize.QualityMate.Automation.Entities;
using Mobilize.QualityMate.Automation.Selectors;
using Mobilize.QualityMate.ControlInterfaces;

[Selector("#Form1")] 
public class MyApplication : PageObject
{
    [Selector("button")]
    public IButton MyButton { get; set; }
    
    // ...
}

Some browsers have a function to create the CSS Selector, you could search how to use it.