How to structure your JavaScript Test code in Vitaq AI

The Page Object model is a very popular design pattern in Selenium for writing maintainable JavaScript.

Page Object Model design patterns in Selenium are where web pages are represented as classes, and the various elements on the page are defined as variables on the class. All possible user interactions can then be implemented as well named methods on the class. This makes the the Test Action Scripts easier to read, maintain and update in the future and separates the elements from the test action code. So when your web page changes during development the corresponding change to elements can be done in a single place

To use Page Object Model classes in Vitaq you must put the JavaScript code into the Javascript Functions Test Action Script as shown in the yellow highlighted section below.

Here is an example of a Page Object Model class in Vitaq AI for testing a file upload using Selenium and webdriverio.

const config = {
    baseUrl: "http://the-internet.herokuapp.com/upload"
}

// Using Mocha Assertions
var assert = require('assert');

// Utility Function To Find Out Selector Is Present On The Page Or Not 
async function isSelectorPresent(timeout,selector) {
     try {
      await (selector).waitForExist({timeout: timeout});
      return true;
    }
    catch (err) {
      return false;
    }
}

// the-internet.herokuapp.com/upload Home Page Started

class uploadFile_PageObject {
  
  get uploadFile() {
    return browser.$("//input[@id='file-submit']");
  }
    
    
  async clickOnUploadFile(){
    await isSelectorPresent(3000,await this.uploadFile);
    return await ((await this.uploadFile)).click();
  }
    
  async confirmSuccessfulFileUpload(){
  var SuccessfulFileUploadHeader = "//div[@id='uploaded-files']";
    var validateSuccessfulFileUploadHeader = await browser.waitUntil(async function () {
      return (await(await browser.$(SuccessfulFileUploadHeader)).getText() =="test.txt");
    }, 3000);
    assert.equal(validateSuccessfulFileUploadHeader, true);
  }
}

const uploadFile_Page = new uploadFile_PageObject

//the-internet.herokuapp.com/upload Home Page Ended

Once we have our uploadFile_PageObject class defined, we can declare the method clickOnUploadFile() and add an appropriate assertion check. This object oriented approach means we can create a very readable Test Action Script for the File Upload action test as shown below:

async function clickToUpload() {
   await uploadFile_Page.clickOnUploadFile();
   await uploadFile_Page.confirmSuccessfulFileUpload();
}

How to implement a File Upload with Selenium and JavaScript in Vitaq AI

Testing a file upload functionality with Selenium is a well known difficulty because the ‘focus’ window switches away from the browser to the file browser of the host operating system. Experienced QA testers know that testing the operating system file browser, has little value to the development process yet many propose elaborate coding techniques to switch to a form of ‘robot’ library to take control of the mouse and keyboard to initiate interaction with a host platform file system window.

We recommend that you use the extended capability of webdriverio to set the value of the file location into the DOM and when executing a Selenium click on the upload button, the application will perform the required functionality.

An example of this is shown below, where we are implementing the File Upload functionality in a Test Action for the same example as we have shown for the Page Object Model post example for the web site http://the-internet.herokuapp.com/upload shown above this post.

In the code we declare a variable fileUpload and assign the object from the file-upload id that needs an entry for the file path that we want to upload. Then by concatenating the file path by importing the path library using require(‘path’) and using it’s join method, we can then use the setValue method to push the filePath text into the DOM.

async function fileUploadWebdriverIO() {
   const fileUpload = await browser.$("//input[@id='file-upload']");
   const path = require('path');
   const filePath = path.join('/home','vitaq','test.txt');
   await fileUpload.setValue(filePath);
}

How can I see the contents of a variable or object in the Vitaq log?

Vitaq AI has many powerful JavaScript (and Python) methods to extend it’s Test Automation functionality. The JavaScript methods can be found in https://vitaq.online/docs/vitaq_library_methods_JS.html

When implementing Test Action Code, you often want to see the results of certain actions displayed into your Vitaq log file for debugging.

This can be achieved using the createVitaqLogEntry(), where you can print some text label to the log window with the value of a variable you want to see as shown below, again using the same file upload example used in the previous two posts.

sync function locateFileUpload() {
    var pageUrl = await browser.getUrl();
    assert.equal(pageUrl, 'http://the-internet.herokuapp.com/upload');
    createVitaqLogEntry("This is the website", pageUrl);
}

For an object the text will be passed as a JSON object which we need to convert to a text string as shown below, again using the File Upload example as before.

   createVitaqLogEntry("This is fileUpload", JSON.stringify(fileUpload));

Using Python Test Actions with a JavaScript Test Activity

Many testers get very fixated on using only one programming language to develop their test action scripts. We are strong believers on providing a choice of languages so users can exploit the power of different capabilities in an easy to use way. That is why we provide the ability to use JavaScript (The language of the browser web front-end), Python (the language of the Data Scientists and many other things) and Low Code visual programming for those that want to quickly bring up a test script without remembering all the syntax and programming concepts.

Let’s look a mixed Test Activity example in the container. Load the SuaceDemoSelenium.vtq file into Vitaq from the examples directory.

The above Test Activity has checking oracle test action called CheckPrice created using a Python Script. You can see this as denoted by the (py) in brackets in the Test Action Scripts tab on the left. If you double click on the Test Action, it will open the Python program.

Another very useful Test Oracle methodology is to read/write to spreadsheets to model financial calculation that can be used as golden reference to check against application functionality that is making the same financial calculations. This can be accomplished using Google Spreadsheets as explained in this very useful blog https://medium.com/swlh/how-to-read-or-modify-spreadsheets-from-google-sheets-using-node-js-6f5a672bdd37

The above Test Activity also has Scriptworks visual coding actions as denoted by (SW), so here we are mixing all three supported programming approaches of Vitaq. To run this Test Activity you need to make sure your preferences define ‘use Scriptworks’ with you user account and password and select the relevant project and run settings to access these visual scripts.