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.

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.

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.

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.

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 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.

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.

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.

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.

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.

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.

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.

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 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.