Skip to content

COTT locator's plugin

Gibiscus edited this page Dec 7, 2022 · 32 revisions

About Plugin

COTT locator's plugin 💼

Collect all locators in 2 clicks


In this documentation, you will learn about:


We all know how laborious the process of collecting locators is.

That is why we have found a solution for you.

The COTT locator plugin is a tool for collecting locators that will make UI testing automation more efficient and easier to use, the COTT locator plugin will significantly speed up your QA work, which will allow you to cover the necessary functionality with tests in a short period of time

  • COTT locator’s plugin - a tool that is an integral part of every QA specialist who uses the COTT
  • COTT locator’s plugin - a tool that will help you collect locators from a page in 2 clicks and immediately use them in your test script
  • COTT locator’s plugin - an automated tool for collecting locators that speeds up the UI testing process at times, and allows your QA team to work more productively

locator-_online-video-cutter.co.gif


Installation

How to run COTT Plugin 🚀

Installation requirements:

  • Recommended node version 14.17.0
  • Windows
  • MacOs
  • Google Chrome Browser

➖ ➖ ➖ ➖ ➖ ➖ ➖

After successfully cloning the project, you need to UP the plugin from the master branch by running the following commands in the project terminal:

for users using node version 14.17.0

  • npm i - installing NPM packages Runs the NPM install command to install the version of the packages listed in package.json
  • npm run build - deploys the plugin locally on your machine

OR

for users using a newer version of node

  • npm i --legacy-peer-deps - yhe command will install the required packages without dependency conflicts
  • npm run build - deploys the plugin locally on your machine

➖ ➖ ➖ ➖ ➖ ➖ ➖

After successfully deploying the plugin, you need to:

  • Then open your chromium-based browser and go to the extensions chrome://extensions/
  • Enable Developer mode

dev-mode.png

  • Click on Load unpacked

load.png

  • Specify the path to the build folder created by the build script, find the locator-collector-plugin folder in the system and pave the path to the build folder

select-plugin.png

  • Pin COTT plugin

pin.png

Close the extensions tab and restart your browser. Now you can extract your pages to XML!


'To see how to install COTT Locator's Plugin, click on the running line'

⤵️

Typing SVG

⤴️


Plugin operation

The plugin is an integral part of our COTT as it is based on XML and fully conforms to the XSD schema structure we are using in our test scripts and files for storing locators

Plugin Structure:

  • Page Name
  • Page Description
  • Find element by text
  • Extraction Targets
  • Extraction Area
  • Extraction Selector
  • Extract button
  • Download XML button

Page Name - the plugin detects which page of the site it is on by the URL and automatically substitutes this value into the name - which it uses to create the XML file when it is generated


Page Description - This is a required parameter in the structure of the locator.xml file If the user did not specify this value when collecting locators, then the plugin will substitute the default value for the description, which can be changed


Find element by text - The plugin can collect locators by text. To do this, you need to specify in this field any text value that is on the current page, and the plugin will collect the locator for all text matches

For a more precise search, we recommend that you specify the full text name of the element you want to collect


Extraction Targets - a multiselector that distributes the collection of locators by type:

  • links
  • inputs
  • forms
  • textareas
  • buttons

It is also possible to select all using the button: Select all

This feature will allow you to more accurately collect locators


Extraction Area - has a default value of all

This function allows you to split the collecting of locators into certain parts of the page:

  • header
  • main
  • footer

Extraction Selector - has a default value of all

This function will allow you to split the search for locators into elements:

  • id
  • class
  • xpath

If you use the default all, then the default plugin will collect locators in order of precedence from id to xpath


Extract button - button to apply search by selected filters


Download XML button - button for downloading the generated XML file with locators

when you click on this button, the plugin prompts you to choose a location to store the file, which allows you to save the file directly to the project structure, the pages folder where the element locators are stored

After saving the generated XML - you get a ready-made set of locators that by default have the structure of the <locators> tag - which simplifies the use and speeds up the process After collecting the locators, you can immediately use them in your test scenario, without any extra edits

loc.png


How to collect the first locators

'To see how to collect locators, click on the running line'

⤵️

Typing SVG

⤴️

Compatibility

  • MacOs
  • Windows