Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Cucumber Selenium WebDriver TypeScript Automation Framework

Name: Cucumber Selenium WebDriver TypeScript Automation Framework
Rating: 4.1 (51 reviews)

Learn how to develop a world class Cucumber, Selenium Webdriver & TypeScript automation framework from the ground up.

Created byCameron Bradley

Last updated 1/2023

English

What you'll learn

Setting up your local development environment.
Build and run our own locally running react application.
Creating our first automation test with Cucumber, Selenium & TypeScript.
Executing your automation test on your locally running application.
Deep dive into our first test and understand tagging, regex, step linking, cucumber params, element locators, developer tools and hooks.
Adding your own unique element identifiers to the application code to enable more automation scenarios.
Setting up our automation framework to produce screenshots on test failure.
Implement Cucumber World to enable us to pass global variable and configuration within each scenarios separated context.
Leverage ENV files for better environment variable management.
Implement dynamic test configuration to provide more flexibility when running our cucumber scenarios.
Defining our element, page and host mappings in page specific .json files.
Introduce our own custom waitFor() function to add stability to our automation framework.
Adding a common ENV file to house all our common configuration across our automation framework.
Setup cucumber html reporter to report on our test suite results.
Reuse our waitFor to help stabilise and validate page has loaded before moving onto the next step.
Advanced debugging techniques leveraging chrome developer tools, console logs and break points.
Automating Links, Buttons and Elements at specific index.
Automating Tables and asserting on an exact match between our Cucumber DataTable and the UI.
Automating Switches, Cards & Avatars.
Automating Drop Down Menus and Select Boxes.
Adding the ability to refresh our page during an automation test.
Automating Browser Alerts, Page Alerts and Tooltips.
Automating Text Areas and Hidden & Visible Text.
Automating stored values and expected values.
Preparing our automation suite for production Automation Suite Runs.
Running our automation on a production environment.
Storing login details in environment specific ENV files.
Leverage Example Tables from Cucumber to run scenarios on specific environments.
Emulate devices resolution during automation text execution.
Introduce the ability to customise our console logs for errors, logs and debug and off.
Adding the ability to customise our automation failure errors.
Leverage random data in our automation suite form steps.
Demonstrate how quickly automation can be added with our world class automation framework.
Tagging our suite for @smoke and @regression in preparation for CI.
Implement an accessibility automation testing suite across our react application.
Produce detailed accessibility improvement reports as well as fix some issues ourselves.
Pushing our project containing our automation framework to GitHub.
Implementing Selenium Hub (Grid) to orchestrate our automation test execution in parallel.
Get our automation tests running on pull request and in CI (Continuous Integration)
Develop and grow your understanding of TypeScript across the entirety of the course.
Implement Advanced Object Orientated Design Patterns and Separation of Concerns.

Course content

21 sections • 175 lectures • 23h 5m total length

Introduction4:35
- About me (Instructor)
- The Testing Talks Hub Difference
- Automation Framework Technology Stack
- Key Online Resources to bookmark
- Let’s connect
Why does building a robust automation framework matter45:58
We look at why automation framework architecture matters and the power of the automation framework you will build as part of this course.

- Why automation framework architecture matters
- The importance of building a 'Proof of Concept' automation framework
- How to leverage your wider team to help build a robust automation framework
- Key object-orientated design principles to use across your frameworks
- How this architectural approach can support multiple automation frameworks
- Finally, Some key observations (Successes and Challenges)

Getting started with Node.js9:46
Install and configure Node.js, a cross-platform open source backend JavaScript runtime, and set up macOS and Windows system paths to enable node commands.
Setting up your development environment3:58
Set up your development environment for this course using intel j ultimate or its free community edition, and install cucumber juice and cucumber plus plugins to accelerate your automation framework.
Setting up your development environment - VSCode5:45
- Downloading and Installing VSCODE
- Installing the Cucumber (Gherkin) Full Support Plugin
- Adding a VSCODE settings.json file
- Adding the the ability to step into cucumber scenario steps via the settings.json
- Stepping into our cucumber feature step definition
How to clone repositories in GitHub7:14
- SSH Keys & Cloning your first GitHub repository
Setting up your automation framework - part 19:55
Set up your first automation framework inside a React app by creating an e2e folder, cloning a repository, installing dependencies with yarn, and configuring TypeScript and tsconfig for test execution.
Setting up your automation framework - part 210:23
Install selenium-webdriver, Chrome driver, cucumber, and ts-node; scaffold e2e with features, step definitions, and hooks; implement a before hook to launch a Chrome browser driver and maximize the window.
Setting up your automation framework - part 36:39
Set up a cucumber selenium web driver automation framework in TypeScript, including quitting drivers, creating a home page feature, and writing navigation and verification step definitions.
Setting up your automation framework - part 48:55
Set up a cucumber selenium TypeScript test framework, import chai's expect and cucumber, locate the contacts element by data-id, and verify its text with getAttribute while configuring cucumber in package.json.
Key Learnings1:10
Learn to download and install node, add it to your system path, clone a repository, manage packages with yarn, and run a first automation test with cucumber, selenium, and typescript.
Module 2 Quiz

Running your automation test in IntelliJ using an NPM configuration2:21
Run your automation tests in IntelliJ with an npm configuration, using cucumber plugins to align with the pipeline. Execute via terminal or Intelligent's run window using the AMPM configuration.
Cucumber Scenario @tags - @dev, @smoke & @regression5:11
Learn how cucumber tags label scenarios and drive test execution with @dev, @smoke, and @regression, and configure --tags in the e2e package.json, using hooks for pre- and post-test code.
Understanding regex, step linking and passing parameters via Cucumber steps10:11
Master passing parameters in cucumber steps by updating regex to capture quoted strings. Apply techniques to map inputs to actions and assertions in a TypeScript Selenium WebDriver automation framework.
Working with element locators - part 19:17
Explore Cucumber with Selenium WebDriver and TypeScript to build flexible step definitions and element locators using data-id attributes and Chrome DevTools.
Working with element locators - part 25:24
Create and validate element locators in a Cucumber, Selenium, and TypeScript automation framework by defining data-id elements, retrieving them with a WebDriver, and asserting display in tests.
Understanding hooks and browser capabilities10:15
Explain how hooks govern before and after test execution, and show building a Chrome driver with browser options to enable headless mode for future Firefox and Safari support.
Key Learnings0:59
Learn to run tests with npm plugin, tag-based device market regression, and cucumber parameter configuration. Parse parameters with regex, add element locators, and leverage selenium builder for better browser capabilities.
Module 3 Quiz

Adding screenshots on failure to our hooks9:59
Implement after hook screenshot capture in a cucumber TypeScript Selenium framework, using cucumber world for global config and fs to write failure images to reports/screenshots for debugging.
Introducing Cucumber World – Separate Context Scenarios - part 19:37
Explore how Cucumber World provides an isolated per-scenario context to store configuration and browser state, enabling parallel tests across Chrome, Safari, and Firefox in a TypeScript Selenium framework.
Introducing Cucumber World – Separate Context Scenarios - part 210:05
Set up a browser builder that uses an environment variable to pick Chrome, Firefox, or Safari, configures headless or headed modes, and validates the selection for cucumber tests.
Introducing Cucumber World – Separate Context Scenarios - part 38:04
Configure Firefox options and accept insecure certs, use a browser switch for Chrome and Firefox, and implement an env var helper for cucumber world setup.
Introducing Cucumber World – Separate Context Scenarios - part 49:56
Introduces cucumber world with separate context scenarios, part 4, to validate the ui automation browser against Chrome, Firefox, or Safari, and refactor hooks to share the driver via scenario world.
Introducing Cucumber World – Separate Context Scenarios - part 510:30
Learn to use Cucumber world for separate driver contexts across all step definitions, exporting the world, and configuring Gecko driver and environment variables to run Firefox tests.
Dynamic test configuration – A more flexible cucumber.js11:16
Learn to configure dynamic cucumber.js test runs across devices and browsers with a custom babel and TypeScript setup for ci-ready e2e automation, including dev, smoke, and regression profiles.
Updating our npm configuration in Intellij2:43
Update npm configuration in Intellij to run cucumber tests using profiles and environment variables, switch to cucumber with dash profile, and streamline environment variables management for test execution.
ENV files for better environment variables management12:14
Load environment variables with dot end from a file and override them in the terminal. Create common config for cucumber tests to enable ci-ready automation with browser and screenshot settings.
Cucumber Reporter and our first Dynamic Test Runner script - part 19:33
Implement Cucumber reporter integration with a dynamic test runner in part 1, store screenshots in reports, configure bootstrap theme, JSON and HTML reports, and add pre and post Cucumber scripts.
Cucumber Reporter and our first Dynamic Test Runner script - part 25:20
Set up a cucumber test runner to generate html reports and surface failures when post scripts fail. Leverage a tag-driven workflow and bash scripts to run cucumber tests in CGI.
Windows users (REQUIRED) - Adding your run_tests.bat to run your automation4:42
Windows users only:
- Why the run_tests.sh returns a COMMON_CONFIG_FILE command error
- Creating our run_tests.bat file to run our automation suite on windows
- Updating our pacakge.json to remove COMMON_CONFIG_FILE references
- Updating our run_tests.sh file with our export COMMON_CONFIG_FILE
Running your automation suite with npm instead of yarn6:53
Many of students reached out asking how we can run our automation suite with npm instead of yarn.
- Consistent exporting of COMMON_CONFIG_FILE across .bat and .sh files
- Refactoring the structure of our package.json scripts
- Updating our yarn references to npm
- Adding additional double dashes to enable passing multiple arguments with npm

This new order we call our scripts inside package.json also resolves the "TypeError: suite.features.forEach is not a function" that some students had reported seeing - especially if you attempted to run the suite with no tests.
Key Learnings1:22
Explore key learnings from the cucumber selenium webdriver typescript automation framework, including generating screenshots, using cucumber world, passing the selenium driver across steps, and dynamic environment-driven test configuration.
Module 4 Quiz

Creating Mappings (Host and Pages) - part 19:43
Map hosts and pages using JSON to pass environment-driven parameters in cucumber world, applying SRP and global types to create a maintainable Selenium TypeScript automation framework.
Creating Mappings (Host and Pages) - part 29:58
Create a new global world config and wire host and pages mappings by loading JSON files at runtime, making mappings accessible in each cucumber scenario.
Creating Mappings (Host and Pages) - part 39:16
Replace the simple driver with a navigate to page function that uses host and pages mappings in a Cucumber Selenium WebDriver TypeScript automation framework.
Creating Element Mappings and using Global Variables to pass page - part 19:05
Learn how to extend element mappings with global variables in cucumber world to determine the current page and preload page element mappings for faster test execution.
Creating Element Mappings and using Global Variables to pass page - part 29:16
Create and load element mappings with a page element mappings file, integrate global variables, and implement a web element locator and helper to drive page elements.
Creating Element Mappings and using Global Variables to pass page - part 311:37
Create element locators and map page elements using global vars in a cucumber Selenium TypeScript framework, defining page and common mappings to drive robust web tests.
Introducing custom WaitFor() – Removing chai - part 18:43
Introduce a custom WaitFor() function that retries interactions until success, boosting stability across selenium, puppeteer, Cyprus, and playwright for reliable parallel tests.
Introducing custom WaitFor() – Removing chai - part 29:08
Introduce a custom WaitFor() in a Cucumber Selenium WebDriver TypeScript framework, replacing chai assertions with a reusable element displayed wait, supporting retries, default timeouts, and script timeout configuration.
Introducing custom WaitFor() – Removing chai - part 38:03
Refactor the framework by introducing custom wait for and get element text utilities, remove chai, and implement reusable driver-based checks to retry until expected text appears.
Key Learnings1:00
Identify key learnings from separation of concerns, host and page config types, and json mappings for hosts, pages, and elements. Implement helpers, cucumber world variables, and page-specific element mappings.
Module 5 Quiz

Matching our page URL to our expected route REGEX12:46
Match page URLs with regex to drive navigation and page assertions in a Cucumber Selenium TypeScript automation framework. Improve stability on page transitions.
Determining our page by matching regex - part 110:06
Remove the global current page and determine the page by matching the URL against a regex in pages.json to auto-map pages.
Determining our page by matching regex - part 27:56
Learn to validate page selection with regex using the current path in a Cucumber Selenium TypeScript automation framework, and extend the suite with a create contact feature and step definitions.
Determining our page by matching regex - part 39:45
Implement a reliable Selenium WebDriver workflow in a Cucumber with TypeScript framework by creating step definitions, using an element locator, waiting for visibility, and clicking with stability checks.
Determining our page by matching regex - part 410:46
Determine the current page using regex matching and add a retry-enabled wait for stability. Map the create contact page with header data id and validate the page after navigation.
Introducing Form Steps - Our first end to end test - part 110:55
Launch your first end-to-end test in the Cucumber Selenium WebDriver TypeScript framework by building a contact form test, cleaning up console logs, and asserting the expected text.
Introducing Form Steps - Our first end to end test - part 211:13
Explore building a reusable, object-oriented end-to-end test framework in TypeScript with cucumber and Selenium, including selecting form options and using get element with options and select element value.
Introducing Form Steps - Our first end to end test - part 37:29
Learn to build an end-to-end test by adding a form step, filling in gender, contact details, and address, saving the new contact, and then searching and validating the saved data.
Introducing Form Steps - Our first end to end test - part 45:49
Introduce form steps for the first end-to-end test, refactor common element attributes into a shared location, and validate create, edit, and delete actions in a fast, stable automation framework.
Key Learnings1:07
Map browser URLs to pages, wait for URL matches with a page regex, then click, fill forms, and select options, building end-to-end Selenium tests in TypeScript and enabling headless mode.
Module 6 Quiz

Introducing lintrc to our automation framework7:51
Introduce ESLint for TypeScript to improve code quality in the Cucumber Selenium WebDriver automation framework, leveraging Chrome DevTools, console logs, breakpoints, and test reports for debugging.
Unlocking the benefits of chrome developer tools - part 16:41
Develop debugging skills with Chrome developer tools, console logs, and breakpoints to locate automation issues, missing or hidden elements, dialogs, and UI changes in a Cucumber Selenium TypeScript framework.
Unlocking the benefits of chrome developer tools - part 28:18
learn how to use chrome developer tools and console logs to diagnose test failures, distinguish UI rendering from data, and add a sleep step in the Cucumber Selenium TypeScript framework.
Unlocking the benefits of chrome developer tools - part 36:54
Enable chrome developer tools for automated tests and use a debugger to inspect the contact form, applying debugging techniques to fix issues and verify tests pass.
Console logs, Breakpoints and Test reports11:39
Learn to debug Selenium Cucumber tests using console logs, breakpoints, and HTML reports; fix failing element mappings, generate screenshots, and interpret test reports to resolve missing elements and improve automation.
Key Learnings0:51
Learn debugging techniques, rc for clean code, and sleep strategies to diagnose test failures, assert values, and review Cucumber reports with failure screenshots using Chrome DevTools.
Module 7 Quiz

Automation Test Radio Buttons - Check and Uncheck - part 19:43
Learn selenium-based automation with cucumber and TypeScript as you automate radio buttons (check and uncheck), use code negation to reduce duplication, and validate autocomplete inputs.
Automation Test Radio Buttons - Check and Uncheck - part 210:46
learn to implement check and uncheck steps for radio buttons using cucumber, selenium, and typescript, including a reusable element checked helper and verification for mail and female options.
Introducing Negate to reduce duplication of step definitions - part 110:42
Explore introducing a gate to reduce cucumber step duplication by handling should be checked and should not be checked, using TypeScript and Selenium WebDriver in radio button tests.
Introducing Negate to reduce duplication of step definitions - part 28:06
Explore negating assertions in cucumber step definitions to reduce duplication, using should not contain and regex to reuse steps across radio buttons, checkboxes, and switches in TypeScript selenium webdriver framework.
Automation test AutoComplete inputs, Input values and form validation - part 110:06
Learn to automate autocomplete inputs and form validation using Cucumber, Selenium, and TypeScript, including mapping data attributes, selecting suggestions by text, and asserting input values.
Automation test AutoComplete inputs, Input values and form validation - part 29:31
Understand automating autocomplete inputs with a cucumber Selenium WebDriver TypeScript framework, including finding elements, clicking, and validating input values via should contain and should not contain value checks.
Automation test AutoComplete inputs, Input values and form validation - part 310:11
Explore automated input testing with equals value assertions, handle required, disabled, and read-only inputs, and implement a scroll to element step to improve Selenium stability on long forms.
Automation test AutoComplete inputs, Input values and form validation - part 411:18
Develop and validate auto-complete input behavior by asserting value equality, disabled and read-only states, and form validation across a Cucumber Selenium WebDriver TypeScript automation framework.
Running our automation suite in parallel & Introducing test retry10:40
Speed up the regression suite by running tests in parallel across browsers and retrying failures. Automate validation inputs and labels within a Cucumber Selenium WebDriver TypeScript automation framework.
Key Learnings0:44
Master interacting with radio buttons, autocomplete inputs, and clicks on text elements; assert enabled or disabled states and negatives; retrieve elements by text paths and values; run automation with retry.
Module 8 Quiz

Automation test Checkboxes (Check and Uncheck)12:57
Automate checkboxes with a versatile check and uncheck step using regex, map by data-id, and validate checked states, extending existing radio button logic for a Cucumber Selenium TypeScript framework.
Automating IFrames - Switching Frames mid test - part 19:22
Learn to automate interactions with iframes using selenium, switching between main content and iframes, and creating iframe-specific steps and mappings for reliable end-to-end tests.
Automating IFrames - Switching Frames mid test - part 28:35
Learn to switch to iframes mid-test and implement element stability checks with a frame-wide retry, ensuring the frame and elements are stable before inputting values.
Automating IFrames - Switching Frames mid test - part 39:47
Learn to switch to iframes mid-test using selenium web driver with typescript. Assert iframe content, like contact elements, with frame stable and wait-for-selector strategies.
Automating IFrames - Switching Frames mid test - part 413:21
Learn to automate iframe interactions by switching frames mid-test, asserting on text inside frames, and extending cucumber selenium web driver steps to handle iframe contexts for form testing.
Refactoring our existing assertion step definitions for element stable6:57
Refactor the assertion steps to use element stable checks by integrating wait-for-selector logic, importing the element stable helper, and ensuring consistent retry and error messaging across verifications.
Automating New Tabs and Windows - part 19:43
Learn how to automate new tabs and windows in selenium and other frameworks, using a tabs feature in the e2e playground to open, switch between tabs, and verify page titles.
Automating New Tabs and Windows - part 28:51
Explore automating new tabs and windows with Selenium WebDriver in TypeScript, switching between tabs using window handles, and retrieving page titles for readability with first, second, third, fourth cues.
Automating New Tabs and Windows - part 38:58
Create the interaction step for new tabs in a Cucumber Selenium TypeScript framework, wire up page notice with step definitions, handle page index and switch window logic for multi-page scenarios.
Automating New Tabs and Windows - part 410:56
Automate new tabs and windows in a Cucumber Selenium WebDriver TypeScript framework by adding steps, verifying the displayed tab, and validating text with regex.
Automating New Tabs and Windows - part 59:56
Automate new tabs and windows with Cucumber Selenium TypeScript in a single framework. Verify text across tabs and windows, map steps to windows, and run end-to-end tests in parallel.
Key Learnings0:41
Master automating checkboxes and radio buttons, handling iframes, new tabs and windows, and crafting subset step definitions; use regex to enable, check, and uncheck, with sleep for slower tests.
Module 9 Quiz

Automating Links, Buttons and Clicking element at Index - part 18:34
Automate links and buttons, click elements by index, and test tables and switches in a Cucumber Selenium TypeScript framework, handling dynamic elements with data IDs.
Automating Links, Buttons and Clicking element at Index - part 27:10
this lecture teaches automating a buttons feature to interact with and assert on buttons by index, including scrolling to target button, using element position and index, and wait for selectors.
Automating Links, Buttons and Clicking element at Index - part 39:20
Implement index-based scrolling and clicking for links and buttons by duplicating and adapting the scroll element into view. Add get elements and click element at index, update imports, and verify tests pass.
Automating Links, Buttons and Clicking element at Index - part 410:08
Learn to automate index-based clicking of links and buttons with Cucumber, Selenium, and TypeScript, avoiding copy-paste pitfalls and validating button text at each position.
Automating Tables - Matching our HTML table to Cucumber Data Table - part 18:24
Automate table assertions by mapping an HTML table to a cucumber data table, transforming it to an object of strings, and validating exact data with data table rules.
Automating Tables - Matching our HTML table to Cucumber Data Table - part 212:06
Develop a getTableData function that uses promises to fetch and stringify HTML table data (rows and cells) for assertions against Cucumber data tables in a TypeScript Selenium framework.
Automating Switches - low code / no code7:05
Automate switches using a cucumber selenium WebDriver TypeScript automation framework by toggling on and off, treating switches as replacements for radios or checkboxes, and validating state changes in the playground.
Key Learnings0:43
Master automating links and button interactions, handling dynamic elements with get elements, converting strings to numbers, asserting on tables and HTML data, including cucumber data tables and checkbox regex updates.
Module 10 Quiz

Requirements

The course has been designed to take you from beginner to expert in building a world class automation framework.
You can complete this entire course on MAC, Windows on Linux.

Description

This course has been designed to simulate a real-world experience in building a Cucumber, Selenium Webdriver (Version 4.1+ Latest) & TypeScript automation framework from the ground up for a fully-featured application.

Upon completion, you will be able to apply your learnings and the automation framework you have built into your respective companies and projects. We are confident you will become an expert in building a world-class automation framework.

Our course and the automation framework we will build together has been developed with guidance from some of the globes leading testing and software engineering professionals and because of that we believe we can offer an incredible course where we will:

- Develop your automation framework against a real react application running on your local machine.

- Build an end-to-end automation framework from the ground up for a full-featured end-to-end react application.

- Evolve your skills and continuously improve your automation framework as we progress through the course

- Learn how to build an object-orientated – engineer reviewed and approved automation framework.

We want this course to be the best decision you have ever made for your personal growth when it comes to improving your knowledge and skills in test automation framework architecture.

Across 170 lectures, 19 Quizzes and 22+ hours of exciting content I will be at the bottom right of your screen instructing and cheering you along throughout the course. You will have everything you need to learn how to build a world-class automation framework.

Who this course is for:

Automation Engineers
Software Testers
Software Engineers
IT Professionals

Cucumber Selenium WebDriver TypeScript Automation Framework

What you'll learn

Explore related topics

Course content

Introduction2 lectures • 51min

Your first automation test9 lectures • 1hr 4min

Deep diving into our first automation test7 lectures • 44min

Screenshots on failure, Cucumber World, ENV variable management and test reports14 lectures • 1hr 52min

Host URLS and Page ROUTE mappings, Our WaitFor function & first End to End test10 lectures • 1hr 26min

WaitFor our Page to be loaded - Simple Form Interactions10 lectures • 1hr 28min

Taking a pause - Lintrc & Debugging Tools6 lectures • 42min

The Playground - Automating all the things - Part 110 lectures • 1hr 32min

The Playground - Automating all the things - Part 212 lectures • 1hr 50min

The Playground - Automating all the things - Part 38 lectures • 1hr 4min

Requirements

Description

Who this course is for: