This tutorial covers the Ins & Outs of the AI Smart Selectors Capability of Scriptworks.

Introduction

AI Smart Selectors is the new Selector Technology that has been recently introduced into the Scriptworks Platform to address the most common issues with test automation in today’s world in terms of script flakiness, script maintenance, and reuse.

Typical selectors one can see in an Automation project will be based on things like xpath, id, css, etc. and SDET’s will be out there building up libraries of these selectors in one of those kinds of ways so they might be building up a large library of xpath or css, or indeed creating a Page Object Model (POM) based on those selectors. 

Development then decide they want to do some re-architecting of the application under test maybe change the front-end framework i.e. the UI framework that’s in use, and then all of those selectors become redundant and they need to be re-created and this is where maintenance issues come about with Automation.

The Scriptworks platform also has the ability to work with the standard selector types. But we are introducing an innovative new approach using the advances of machine learning and AI technologies to address those fundamental problems within automation, we introduced the concept of smart selectors

Smart Selectors essentially allow us to describe the element we wish to interact within a way we would be as a user based on the visual appearance of the application under test, so labels, placeholders, etc. that exist in the app for the application elements.

Our AI capabilities use a technique that’s not based on visual views of an application i.e. not using image classification or OCR text or similar approaches. What it actually looks at is the application structure in the DOM itself and based on previous examples that the AI has been trained with tries to figure out which element is being described i.e. what ok button we are looking for, which username field we are trying to locate and it returns a best guess.  This has the effect of making the description of the element independent of the application in architecture. So we describe it in natural language i.e. in English or the language of the application under test and the AI works out what we mean so it’s not looking for some specifics of xpath location or specifics of id’s or classes, etc it’s analyzing the application UI as a whole and giving us a result.

So, Scriptworks has made some inroads into helping and addressing some of the big issues in automation in terms of flakiness and selector maintenance.

We have talked about a lot above on Smart Selectors. Now let’s understand it practically. 

In this article, we will perform an end-to-end test run on a sample e-commerce web app named Swag Labs, where we will be performing an end-to-end test using Scriptworks Visual Programming without having to learn any xpaths or element ids.

Prerequisite:-

To know more about Scriptworks Client and Selenium Standalone Server, please follow this Article.

Exercise:- 

1) Navigate to saucedemo.com

navigation to website

2) Enter Username and Password and click on the Login button.

entering username and password

3) Click on the Sauce Labs Bolt T-shirt link.

clicking on saucelabs bolt t-shirt

4) Click on the Add To Cart Button.

clicking on add to cart

5) Click on the Cart Icon.

clicking on cart icon

6) Click on the Checkout Button.

clicking on checkout button

7) Enter the first name, last name, zip code, and click on the continue button.

entering first name last name

8) Click on the Finish Button.

clicking on finish button

9) Click on Back Home Button.

Clicking on back home button

Practical Demonstration:-

In the following are the Steps to Perform the above Exercise, using Scriptworks Visual Programming/Low code in ‘Scriptworks’ IDE:-

Pre-requisite: Users should be able to login to Scriptworks via their Credentials, and their Scriptworks Client should be up and running. 

To know more about Scriptworks Client and Selenium Standalone Server, please follow this Article.

1) Open Scriptworks on your system with your credentials and open the project where you want to automate your web application using the AI Smart Selectors of Scriptworks.

opening the project

2) Now click on the Block symbol present on the left side panel and click on getting started. 

BlockSymbol → Getting Started → WebDriverJS

clicking on getting started button

choosing webdriverjs

putting webdriverjs inside the canvas

3) Now we have to navigate to the web application. 

For that click on the blocks again and type navigate in the search box and click on the search button.

Search → Navigate → Drag and Drop to Canvas

Searching Navigate

putting navigate to block inside the canvas

4) Now, we will use the comment block to let others know what we will perform. For that, we are going to click on the search text box and write comments, and hit return.

Search → Comment → Drag and Drop to Canvas

searching comment

putting comment inside the canvas

5) Now as we have informed everyone what we are going to do through the comments block. Let’s find out for relevant blocks from the blocks section present on the left-hand side panel. 

Keeping in mind that, we are performing above mentioned exercise with AI Smart Selectors.

Click on the AI-Semantic Actions link present on the left-hand side panel and choose the relevant block.

choose AI - semantic and click

description text is present

In the above image, we have dragged and dropped all relevant block required for performing login to swaglabs.com

Let’s enter the description and select the kind of element it is, from the dropdown link.

entering simple english

As you can see how simple is to fill the description inside the blocks and that’s also in simple English. Likewise, we have selected relevant element categories from the drop-down link beside the description text.

Now, what about adding a screenshot to the logs? For that, I am using a different block named add screenshot to log.

Let’s search for it and put it on canvas. And give a test run to see what we observe in the log.

searching screenshot from searchbox

puttinh screenshot to log into the canvas

putting screenshot log from the test run

Isn’t it awesome to see a screenshot in your log? Let’s find out more awesome things in the way.

6) Let’s Drag another comment block following Step 4 to tell other’s what next we are going to do.

putting add bolt t shirt comment inside the canvas

7) Now Click on the AI-Semantic Actions link present on the left-hand side panel and choose the relevant block to perform Add Bolt T-shirt to Cart Operation.

add relevant blocks for add t-shirt to cart

add bolt t-shirt with add screenshot block

Again I have used simple English terms in the place of description text, which I want to perform on the Bolt T-shirt. Plus added a screenshot log as well. 

8)  Let’s Drag another comment block following Step 4 to tell other’s what next we are going to do.

putting add checkout comment

9) Now Click on the AI-Semantic Actions link present on the left-hand side panel and choose the relevant block to perform the Checkout Operation.

putting relevant blocks inside the canvas to perform checkout

10)  Let’s Drag another comment block following Step 4 to tell other’s what next we are going to do.

Comment with Enter Info

11) Now Click on the AI-Semantic Actions link present on the left-hand side panel and choose the relevant block to perform the Enter User Info During Checkout Operation.

putting relevant blocks for filling required info

In the above image, we have used Scriptworks Faker’s which are auto data generators to fill the specific fields. It’s quite useful in filling information instantly to any of the fields where you want to fill any random data.

12) Let’s Drag another comment block following Step 4 to tell other’s what next we are going to do. 

putting comment for finish your shopping and back to home page

13) Now Click on the AI-Semantic Actions link present on the left-hand side panel and choose the relevant block to perform the Finish Your Shopping and back to home page Operation.

putting whole body inside the canvas

14) Now, the final thing is a Test Run. Make sure you have followed the prerequisite mentioned above before the Test Run. Make sure you can see Green Symbol before clicking on the play icon.

clicking on play icon

Test Pass

This is how by the use of AI smart Selectors and using simple English language descriptions we are able to perform end-to-end automation on saucedemo.com. AI Smart Selectors really are an Awesome and unique feature of Scriptworks.