Book Image

Enhanced Test Automation with WebdriverIO

By : Paul M. Grossman, Larry C. Goddard

Book Image

Enhanced Test Automation with WebdriverIO

By: Paul M. Grossman, Larry C. Goddard

Overview of this book

This book helps you embark on a comprehensive journey to master the art of WebdriverIO automation, from installation through to advanced framework development. You’ll start by following step-by-step instructions on installing WebdriverIO, configuring Node packages, and creating a simple test. Here you’ll gain an understanding of the mechanics while also learning to add reporting and screen captures to your test results to enhance your test case documentation. In the next set of chapters, you’ll delve into the intricacies of configuring and developing robust method wrappers, a crucial skill for supporting multiple test suites. The book goes beyond the basics, exploring testing techniques tailored for Jenkins as well as LambdaTest cloud environments. As you progress, you’ll gain a deep understanding of both TypeScript and JavaScript languages and acquire versatile coding skills. By the end of this book, you’ll have developed the expertise to construct a sophisticated test automation framework capable of executing an entire suite of tests using WebdriverIO in either TypeScript or JavaScript, as well as excel in your test automation endeavors and deliver reliable, efficient testing solutions.

Preface

Who this book is for

What this book covers

To get the most out of this book

Download the example code files

Conventions used

Share Your Thoughts

Download a free PDF copy of this book

Chapter 1: The Utility Belt – Tools Every Superhero SDET Needs

Chapter 1: The Utility Belt – Tools Every Superhero SDET Needs

Virgin machine setup

Rule of thumb – the hardware resources and access rights must match the development team

Installing Visual Studio Code for your operating system

X-ray vision – writing better code with Prettier, ESLint, and GitLens

Installing Chrome extensions

Installing WebdriverIO

Free Chapter

Chapter 2: Fortress of Solitude – Configuring WebdriverIO

Chapter 2: Fortress of Solitude – Configuring WebdriverIO

WebdriverIO setup

Building and installing the project dependencies

Chapter 3: Cybernetic Enhancements – WebdriverIO Config and Debug Tips

Chapter 3: Cybernetic Enhancements – WebdriverIO Config and Debug Tips

The three main files of a WebdriverIO node project

Rule of thumb – match your developer’s hardware

Letting Yarn help keep files up to date

Configuring debugging with VS Code

Dynamic configuration

Our first custom wrapper method – global.log()

Rules to enforce coding standards

Chapter 4: Super Speed – Time-Travel Paradoxes and Broken Promises

Chapter 4: Super Speed – Time-Travel Paradoxes and Broken Promises

Technical requirements

The time-travel dilemma

Schrödinger and the quantum mechanics of test automation

Callbacks, promises, and async/await

The death of fibers and synchronous mode

Chapter 5: Alter Egos – The ClickAdv Wrapper

Chapter 5: Alter Egos – The ClickAdv Wrapper

Adding a helpers file

The “Hello, World!” of test automation

ES6 helper modules versus overriding intrinsic methods

Who tests the SDET’s code? Sanity testing of the automation framework

Extending our ES module helper file with a custom click method

Why are waits difficult to implement correctly?

Expanding the click method wrapper

Supercharged scroll before a click event

Expanding the click method wrapper

The importance of metrics

Self-healing elements

Stubbing out methods with the “alreadyFailed” switchboard key

Chapter 6: The setValue Wrapper – Entering Text and Dynamic Data Replacement

Chapter 6: The setValue Wrapper – Entering Text and Dynamic Data Replacement

Normalizing the element type

Adding the setValue() method wrapper

Is this trip really necessary?

Coal into diamonds – replacing dynamic data tags

Injecting versus typing text into a field

Checking whether the field is pre-populated for speed

Behind the mask – SetValuePassword() to keep data secure

Putting it all together

Chapter 7: The Select Wrapper – Choosing Values in Lists and Comboboxes

Chapter 7: The Select Wrapper – Choosing Values in Lists and Comboboxes

Adding the base functionality of clickAdv() and setValueAdv() to selectAdv()

Selecting an item from the list

Selecting from a combobox

Inspecting a list that closes when it loses focus with SelectorsHub

Writing a locator that is an element inside a list

Chapter 8: The Assert Wrapper – the Importance of Embedded Details

Chapter 8: The Assert Wrapper – the Importance of Embedded Details

expect, assert, and should –how did we get here?

Timeout – delay of game

What are hard and soft expect assertions?

Introduction to Allure reports

Chapter 9: The Ancient Spell Book – Building the Page Object Model

Chapter 9: The Ancient Spell Book – Building the Page Object Model

Technical requirements

What is Page Object Model?

What constitutes a good Page Object pattern?

Creating a page class for the tests

Adding object selectors

module.exports = new HomePage();Calling methods to be used in the test

Reducing code with common objects and methods

POM using Klassi-js

Chapter 10: Increased Flexibility – Writing Robust Selectors and Reducing Maintenance

Chapter 10: Increased Flexibility – Writing Robust Selectors and Reducing Maintenance

Technical requirements

Reducing page object maintenance with generic selectors

Anatomy of an XPath selector

Leveraging data-qa and ARIA attributes

Writing an XPath element that contains a textual substring

Second chances – getting valid objects from stale selectors

Chapter 11: Echo Location – Skipping the Page Object Model

Chapter 11: Echo Location – Skipping the Page Object Model

A reduced code base

Automation in plain English

Getting a visible button by name

Getting a visible field by name

Getting a visible list by name

Getting a visible element from a collection

Beware the endless rabbit hole!

Chapter 12: Superhero Landing – Setting Up Flexible Navigation Options

Chapter 12: Superhero Landing – Setting Up Flexible Navigation Options

Technical requirements

Using system variables

Adding data configuration files

Configuring Allure reporting

Chapter 13: The Multiverses – Cross-Browser Testing and Cross-Environment Testing

Chapter 13: The Multiverses – Cross-Browser Testing and Cross-Environment Testing

Horizontal scaling – cross-browser testing

Using built-in functionality via the wdio config file

Using LambdaTest online to automate the browser testing grid

Using Selenium Standalone server to locally build the testing grid

Avoiding the rabbit hole of horizontal scaling

Handling environment-specific logic

The multiverse – one test, two environments

Chapter 14: The Time-Traveler’s Dilemma – State-Driven End to End User Journeys

Chapter 14: The Time-Traveler’s Dilemma – State-Driven End to End User Journeys

Technical requirements

Divide and conquer!

Simplifying the complexities of a dynamic journey

Changing decision points

Wash, rinse, repeat

Why not generate these Artifacts with API calls?

Chapter 15: The Sentient Cape – Running Tests in a CI/CD Pipeline with Jenkins and LambdaTest

Chapter 15: The Sentient Cape – Running Tests in a CI/CD Pipeline with Jenkins and LambdaTest

Technical requirements

What are Jenkins and Slack?

Installing OpenJDK for Jenkins

Installing Jenkins as a standalone application

Installing Jenkins

Creating a WebdriverIO project with Jenkins

Installing the Jenkins plugin for LambdaTest

Creating a freestyle project and job

Reporting in Slack from Jenkins

On-demand and scheduled suite runs

Types of debugging runs with Jenkins

Epilogue

Index

Other Books You May Enjoy

Other Books You May Enjoy

Packt is searching for authors like you

Share Your Thoughts

Download a free PDF copy of this book

Appendix: The Ultimate Guide to TypeScript Error Messages, Causes, and Solutions

Appendix: The Ultimate Guide to TypeScript Error Messages, Causes, and Solutions

Problem: Install default WDIO settings by passing “--yes” parameter still asks configuration questions

Problem: Missing script “wdio”

Problem: “node : The term ‘node’ is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again.”

Problem: ‘wdio’ is not recognized as an internal or external command”

Problem: Tests suddenly fail to run including the \specs\test.e2e.ts. sample test.

Problem: Statements execute out of order

Problem: “ERROR @wdio/runner: Error: describe expects a function argument; received [object AsyncFunction]”

Problem: “Unsupported engine”

Problem: JavaScript Debug Terminal skips breakpoints

Problem: Browser launches and locks up

Problem: “SevereServiceError: Couldn’t start Chromedriver: timeout. Please check if port [<PortNumber>] is in use”

This is how to do it using macOS: lsof -i :<PortNumber> : kill -9 <PID>

Problem: MODULE_NOT_FOUND

Problem: Error: Could not execute “run” due to missing configuration, file “C:\repos\wdio\test\wdio.conf.ts” not found! Would you like to create one?

Problem: “report does not exist” when running an Allure report

Problem: “[P]lugin “allure” reporter, neither as wdio scoped package “@wdio/allure-reporter” nor as community package “wdio-allure-reporter”. Please make sure you have it installed!”

Problem: TypeError: Cannot read properties of undefined (reading ‘open’)

Problem: Cannot read properties of undefined (reading ‘setWindowSize’)

Problem: A service failed in the ‘onPrepare’ hookSevereServiceError: Couldn’t start Chromedriver: timeout. Please check if port 9515 is in use!

Problem: “Cannot find name ‘expect’. Do you need to install type definitions for a test runner?” but the test still runs.

Problem: “An import path can only end with a ‘.ts’ extension when ‘allowImportingTsExtensions’ is enabled.ts(5097)”

Problem: browser.debug() generates “Failed to read descriptor from node connection: A device attached to the system is not functioning.”

Problem: Element implicitly has an ‘any’ type because type ‘typeof globalThis’ has no index signature

Problem: Cannot find type definition file for ‘jasmine’

Problem: “Execution of 0 workers” No tests get executed.

Problems: Cannot find name ‘browser’ and Cannot find name ‘$’

Problem: Property ‘toBeExisting’ does not exist on type

Problem: ERR! [Error: EACCES: permission denied (Mac OSX)

Problem: ERROR @wdio/selenium-standalone-service: Error: not found: java

Problem: “ECONNREFUSED 127.0.0.1:9515” a service failed in the ‘onPrepare’ hook tcp-port-used

Problem: Error: Cannot find module ‘C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js’

Problem: “Note: Package.json must be actual JSON, not just JavaScript”

Problem: Protocol error (Runtime.callFunctionOn) target closed

Problem: “unexpected token” in tsconfig.json

Problem: “TypeError: elem[prop] is not a function”

Problem: “ServerServiceError in “onPrepare” Cannot find package ‘chromedriver’

Problem: Property ‘{functionName}’ does not exist on type ‘({functionType<{argName>}) => void’

Problem “Property ‘addCommand’ does not exist on type ‘Browser’.” (macOS)

Problem: ConfigParser: pattern ./test/specs/**/*.ts did not match any file.

Problem: Error: Timeout - Async function did not complete within 10000ms (set by jasmine.DEFAULT_TIMEOUT_INTERVAL)

Problem: Error: Error: Couldn’t find page handle

Problem: This expression is not callable. Type ‘void’ has no call signatures.ts Are you missing a semicolon?

Problem: “File is not a module”

Problem: “Couldn’t find page handle”

Problem: “Error: {pageName} is not defined”

Problem: Argument of type ‘ChainablePromiseElement<Element>’ is not assignable to parameter of type ‘Element’.

Problem: Unable to delete or modify files or folders in the WebdriverIO project

Problem: EJSONPARSE Unexpected token in JSON while parsing Failed to parse JSON data

Problem: A long string of gibberish garbage characters is added to the wdio.config.ts file when running in JavaScript Debug Terminal in Windows

Yarn and Node Package Manager (npm), Node Version Manager (nvm), and Node Package Executor (npx) Shell command cheat sheet

Reference links

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Creating a page class for the tests

We have created a LoginPage class that represents a specific page of the web application. The web element selectors are defined as getters using the $ function from WebdriverIO, which allows us to locate elements on the page using CSS selectors.

The class also includes page methods such as enterUsername, enterPassword, and clickLoginButton. These methods encapsulate actions that can be performed on the page, such as entering text into input fields and clicking buttons.

The mkdir command in Linux/Unix allows users to create or make new directories. mkdir stands for “make directory”:

Go to your command prompt | Terminal and pass the desired name to the mkdir command:

mkdir loginPage.ts
homePage.ts
testClass.ts