Playwright with Cucumber BDD & TypeScript - Beginner to Pro

Install Node.js to run JavaScript or TypeScript code with Playwright for browser testing. Verify by running node -v in a terminal, sometimes after restarting the terminal.

Install and set up Visual Studio Code, a popular Microsoft IDE, download for Windows or other OS, install, create a desktop icon, and explore the extensions marketplace.

Install git bash on windows and set it as the terminal in Visual Studio Code. Verify node version and use bash in Visual Studio Code by switching the terminal.

Download the latest open JDK 11 and install it, then extract the folder and set JAVA_HOME and PATH to java/bin, and verify with java -version.

Kickstart your TypeScript and Node.js projects by installing Node.js 20+, initializing a package.json, installing TypeScript and ts-node globally, and configuring VS Code with Code Runner.

Learn a simple TypeScript example from a Node.js setup, declaring typed variables with let, logging with console.log, and running TS code via ts-node and a tsconfig.json.

Explore the key differences between TypeScript and JavaScript, highlighting TypeScript as a superset with type safety, and show how ts-node enables seamless execution of TS code in Node.js.

Demonstrate how TypeScript adds type annotations and enums, enforcing type safety, and explain that enums exist in TypeScript but not in JavaScript, highlighting TypeScript as a JavaScript superset.

Recap the core technologies for this course: Playwright with TypeScript and Node.js foundations, showing how TypeScript reduces errors while Playwright automates browser testing in the browser of our choice.

See node js as a workshop where JavaScript or TypeScript becomes robust, like a kitchen for diverse web apps, with http and fs modules and npm for end-to-end tests.

Learn a hands-on approach to node.js modules by reading a text file with the built-in fs module, handling errors, and configuring types and dependencies for TypeScript.

Explore Node.js modular architecture by building a custom module named greets in TypeScript, exporting greet, and importing it to print a hello message to the console.

Declare typed variables and arrays in TypeScript, log outputs to the terminal, and observe type safety with string and number arrays while exploring basic data types in this part one.

Explore the differences between var, let, and const in TypeScript, showing how each declares and mutates variables, including redeclare and reassignment behavior, with practical examples.

Explore how to define functions in TypeScript using the function keyword and arrow functions, declare string parameters, return values, and log results, including module concepts.

Explore conditional statements and loops in TypeScript by building an if/else example that prints you are an adult or you are a minor, and a for loop that logs indices.

Explore TypeScript by comparing objects and classes, define a student object with name and age, and use a car class blueprint with a public constructor to log model and year.

Explore the fundamentals of asynchronous programming in TypeScript with Playwright, contrasting synchronous and asynchronous code and illustrating async and await in practical examples.

Explore promises in Playwright with TypeScript, showing how asynchronous tasks use resolve and reject, and how the then chain handles outcomes, illustrated by a pizza analogy.

Explore how async and await in TypeScript simplify handling time-consuming tasks like data fetching by pausing a function until a promise resolves, improving readability.

Create a simple web server with Node.js and npm using Express, TypeScript, and ts-node; compile TypeScript to JavaScript and run on port 3000.

Install the latest playwright with npm, initialize a TypeScript project, and install the playwright browsers, then create a dedicated automation framework folder and set up cucumber.

Explore the playwright project setup, default structure, and configuration, including npm integration and package.json, then run tests with npx playwright test in headed or headless mode, preparing for cucumber bdd.

Install cucumber as a dev dependency, install RTS node to run TypeScript, and restructure the Playwright project by creating src with features and step-definitions folders for cucumber BDD.

Install cucumber and znode as dev dependencies, configure VS Code with the cucumber extension and auto-completion for step definitions, and create tsconfig for TypeScript to compile to JavaScript for Node.js.

Explore how Gherkin describes software behavior in a business-friendly language for Cucumber, using feature files, scenarios, and given/when/then steps, with step definitions and Playwright actions.

Master cucumber and gherkin basics to document a positive contact us scenario, fill fields, submit, and verify the success message, then create a feature file with given when then steps.

Map cucumber feature steps to actions using given, when, and then, execute the feature file with cucumber-js and node, and progressively implement steps with Playwright's browser, context, and page.

Set up a chromium browser in non headless mode, configure a 1920x1080 viewport, navigate to WebDriver University, and use Cucumber with TypeScript to locate contact us button and manage timeouts.

Enhance cucumber tests with playwright by handling new tabs, increasing the default timeout, and organizing steps into separate files; introduces shared state using hooks and fixtures.

Build a shared browser context and page across multiple step files using fixtures and cucumber hooks, with before all, after all, before each, and after each.

Refactor your Cucumber framework by extracting hooks and page fixtures to share browser context, enabling before and after hooks, tab handling, and viewport size across scenarios.

Master final test steps in Playwright with Cucumber BDD and TypeScript by implementing contact form interactions, robust selectors, and assertion of the success header using fixtures and async steps.

Learn to design negative scenarios in cucumber with playwright and typescript, reusing steps to validate invalid contact us form submissions and error messages.

Create and recap how we built a cucumber-based test suite with a feature file, valid and invalid scenarios, and Gherkin steps, then mapped them to Playwright actions and assertions.

Create dynamic test scenarios using cucumber expressions and string parameters to input first name, last name, email, and comment, with number and word parameters for flexible data.

Implement new steps using cucumber expressions to map step definitions, handling string and int parameters in TypeScript. Log parameters with console.log to validate dynamic data before using Playwright next.

Learn to implement cucumber expressions in TypeScript with Playwright by mapping feature file steps to step definitions and parameterizing inputs on the contact us page.

Learn to generate random data with faker.js in a cucumber and TypeScript project, install it as a dev dependency, and apply random names and emails to tests.

Master scenario outlines in Cucumber to efficiently create multiple test cases with predefined data, parameterized steps, and examples for both valid and invalid email scenarios.

Map multiple scenarios with scenario outlines to avoid duplication, then implement asynchronous steps with type-safe parameters in TypeScript, following the dry principle.

Map and implement steps using cucumber scenario outlines, employing dynamic data and a dynamic XPath selector to verify success or error messages in Playwright with TypeScript.

Explore the background keyword in Gherkin to reduce code duplication by running common steps before any scenario in a feature file.

Apply the dry principle by using the background keyword to define preconditions that run before scenarios, reducing duplicated steps and ensuring seven scenarios pass.

Practice building a login feature with valid and invalid scenarios in a cucumber bdd and TypeScript setup using Playwright, navigating to the login portal and entering credentials and clicking login.

Create a login.feature file in the features folder, define a login page scenario with valid and invalid credentials using scenario outlines, and prepare to document the remaining requirements.

Document scenario requirements for a cucumber feature using a scenario outline and examples to test login on WebDriver University, including username, password, login action, and alert validation.

Map and implement undefined steps for a scenario outline by updating selectors to login portal and defining login steps with username and password placeholders in Playwright.

Map and implement step definitions in Playwright with cucumber bdd and TypeScript, using page fixture, wait for timeout, listen for dialog events, capture alert text, and assert it with expect.

Apply real world tips and optimizations for a Playwright with Cucumber BDD and TypeScript framework, including base steps and direct login page navigation to reduce duplication.

Learn how cucumber tags organize and selectively run scenarios across feature files using the at-symbol syntax like regression, smoke, and login.

Learn to use cucumber tags to target multiple feature files and specific scenarios, and build a central index.ts to manage commands and test profiles via the terminal.

the lecture centralizes common functionality in index.ts, enables runtime tags via the terminal, and demonstrates executing the constructed command with logging and error handling, including package.json script setup.

Learn to use cucumber tags in a Playwright TypeScript project: tag features, configure index.ts, and run targeted scenarios with npm scripts (regression, smoke, login, contact us).

Learn to ignore specific scenarios by using an ignore tag in your cucumber tests, configure --tags in index.ts, and run targeted scenarios to skip unwanted ones.

Review the central Index.ts with key cucumber settings and the plan to extend the automation framework using cucumber tags to ignore scenarios or entire feature files.