Playwright TypeScript: GenAI + MCP Servers + Cucumber BDD

Explore TypeScript, the open-source language by Microsoft that builds on JavaScript with static typing, enabling early error catching and clearer, maintainable code for automation frameworks like Playwright.

This lecture covers prerequisites for TypeScript setup, including installing Node.js and npm, choosing Visual Studio Code, installing TypeScript globally, configuring tsconfig, and compiling with npx tsc.

Explore TypeScript naming conventions, from kebab case file names to Pascal case classes and camel case functions, and master variables and datatype basics with type annotations, unknown and any.

Explore union types, arrays, tuples, enums, and object types in TypeScript, and learn how each type constrains variables, enables fixed structures, and supports robust code.

Explore TypeScript operators across arithmetic, assignment, comparison, logical, unary, ternary, and type operators, with type safety, type assertions using as, including instance of, while noting bitwise not covered.

Discover how the concatenation operator joins string variables with numbers in console.log examples to produce outputs like way to automation and 302 automation.

Explore functions in TypeScript, learn how to type parameters and returns, implement void and string-returning functions, pass and print arguments with console.log, and handle optional parameters and template literals.

Master arrow functions in TypeScript by building a simple two-parameter multiply function and logging the result. Explore function overloading with string and number variants and optional parameters.

Explore control flow statements with if else, else if, and switch case, including syntax, default handling, random number generation, and practical console log examples to reinforce decision making.

Master loops in TypeScript applications, including while, do while, for, and for each, with nesting examples and practical print statements for arrays.

Master 1D arrays in TypeScript by understanding 0-based indexing, length, and element access; populate with numbers (randomized), print with console.log, iterate with for and for-of, reverse printing, preview 2D arrays.

Explore 2d arrays in TypeScript by building a 2x3 matrix, accessing elements by row and column, and iterating with nested loops to print values from csv or excel data.

Explore TypeScript tuples, a fixed length, ordered array with elements of different types. Create, read, and merge tuples with optional elements and spread, using number and string examples.

Explore TypeScript objects as key-value containers with properties and methods. Learn typing inside objects for type safety, and merge objects.

Explore classes and oops in TypeScript, including class blueprint, constructors, instance variables, methods, and object creation, with access modifiers, inheritance, abstract classes, interfaces, and export/import.

Explore variables, scope, and access modifiers in a TypeScript class by implementing public, private, and protected members, plus a static property and local variables.

Learn how TypeScript modules scope code to a file and how to export and import classes, functions, and constants to access them across modules.

Explore inheritance in TypeScript by extending a base WebDriver class into ChromeDriver and FirefoxDriver, accessing shared navigation and URL properties with public, private, and protected access.

Explore abstract classes and abstract methods in TypeScript, learn why you cannot instantiate a base class, and how derived Chrome and Firefox drivers implement shared launch browser logic.

Learn how TypeScript interfaces enable multiple inheritance and compare them with abstract classes, using WebDriver to implement Chrome and Firefox drivers.

Implement getters and setters in TypeScript to encapsulate a private salary. Expose the value as a property and validate the setter for a positive amount, supporting automation frameworks.

Explore exception handling in TypeScript. Learn how try-catch, finally, and throw manage runtime errors and recover gracefully, with examples like division by zero and array index issues.

Install playwright quickly with npm init playwright, pick TypeScript, run tests via npx playwright test, and configure chromium in playwright.config.ts with headless: false to launch a browser.

In this lecture, you write your Playwright test by importing test and expect, creating an async test with a page that navigates to a site and validates the title.

Explore browser navigation and element locating in Playwright TypeScript with cucumber, using go to, go back, go forward, and reload, plus set view port size and locators for Gmail login.

Explore how to handle dropdown lists using Playwright TypeScript, selecting options by value, label, or index, and counting all options via option tags in a select element.

Learn to locate all links on a page, count them, print text and href values, and narrow the search to a specific block using XPath or block-scoped locators in Playwright.

Complete two automation assignments: search google for 'way to automation', count and print all page links in the console; then visit makemytrip.com, print the section values, and seek validation.

Learn to handle checkboxes in Playwright TypeScript by locating inputs with a css selector, counting matches, and looping through each checkbox inside a block using count and nth to click.

Complete the four checkboxes assignment in Playwright TypeScript with Cucumber BDD and live projects by ensuring all are checked, then randomly select two and print each checkbox text for validation.

Learn to locate web elements with XPath and CSS selectors, handling dynamic IDs and using relative, absolute, and partial XPath techniques.

Master relative, absolute, and partial XPath to locate unique elements, validate them with browser devtools, and copy or auto-generate paths in Chrome and Firefox.

Discover how to master CSS selectors for web automation, compare CSS selectors with XPath, and build unique selectors using id, class, and structural patterns like child and nth-child.

Explore Selectors Hub, a cross-browser plugin that generates XPath and CSS selectors for complex elements, with auto code generation for Java and Python and a debugger for dynamic menus.

Learn how to use Playwright assertions to validate URLs, titles, text, and element states, including visibility and checkbox checks, with positive and negative tests and clear logs.

Learn to handle web tables with Playwright TypeScript, counting dynamic rows and columns, fetching complete data, and validating specific values across rows and cells.

Learn how to handle shadow root elements in Playwright using simple css selectors. The example shows diagnosing selector issues and that Playwright interacts with shadow roots without extra logic.

Learn to handle mouse over menus in Playwright TypeScript with Cucumber BDD by hovering to reveal a submenu and clicking to navigate.

Learn to automate a price range slider by locating the element, computing its center with the bounding box, and dragging the mouse from center to the right.

Handle a resizable element by dragging on the x and y axes using the bounding box, then resize to 400 right and 400 down.

Learn to implement drag and drop with Playwright TypeScript by locating draggable and droppable elements, computing their bounding boxes, and simulating mouse down, move, and up actions.

Learn to right-click an element in Playwright using an xpath locator and button: 'right' to reveal context menus, then navigate to 'Product info' → 'how to set up'.

Complete three assignments: move the slider from right to left and center it, drag and drop to a new target, and right-click the image to access product info installation.

Learn to handle JavaScript alerts in Playwright by setting a dialog listener before navigation, capture the alert message, and accept the dialog to continue testing.

Explore handling iframes in Playwright by switching to the frame with a frame locator, interacting with framed elements, and returning to the main page for outer elements.

Learn to handle tabs and pop ups in Playwright with promise events, frame switching, and multi-tab navigation, including waiting for load state and closing tabs.

Execute JavaScript within the page to highlight elements with a red border using Playwright's evaluate, then take screenshots of the page or an element.