Detox & Playwright Web and Mobile Automation with AI

Learn how JavaScript, a popular high-level scripting language, powers UI and mobile automation with Detox and Playwright, covering variables, conditionals, loops, and exception handling as the base for Detox testing.

Configure a mac environment for JavaScript by installing Visual Studio Code and Node.js with npm. Learn to write and run code using an editor and the node package manager.

Configure Node.js and Visual Studio Code on Windows, install the required tools, and set up a project folder for JavaScript basics, including opening the folder in Visual Studio Code.

Configure the GitHub Copilot extension in Visual Studio Code to act as an AI pair programmer, including installation and signing in with a GitHub account.

Learn to create a basic JavaScript program, print messages with console.log, and run it via the terminal or a code runner, featuring a hello world example and .js file setup.

Master variables in JavaScript: store values in memory, reuse data with meaningful names, compare var function scope to let block scope, and use // and /* */ comments.

Explore how variables work and print them with console.log, using emp id as an example, observing execution, and printing the full information to the console.

Explore constants in programming, defining values that cannot be changed. The lecture uses an employee location example and shows the assignment error when attempting to modify a constant.

Explore primitive and reference data types, including strings, numbers, booleans, null, undefined, and concepts like infinity and not-a-number (nan), with JavaScript examples and type checks.

Explore string methods in JavaScript, including accessing characters by index, immutability, case sensitivity, and methods like concat, toLowerCase, toUpperCase, trim, split, slice, and length; learn converting numbers to strings.

Master the basics of operators in JavaScript, including arithmetic, assignment, comparison, and logical operators, with practical, example-driven explanations.

Explore how logical operators work in practice, using and, or, and not with true/false examples. See a truth table and console.log demonstrations, then apply these concepts to simple programs.

Learn how conditional statements control script execution using if, else, and else if, with real examples showing true or false conditions, and multi-condition logic.

Learn how to use the for loop in JavaScript, including its initialization, condition, and increment, with practical examples like printing Surendra, generating even numbers, and nesting loops.

Compare while loops, do-while loops, and for loops, focusing on condition checks, infinite loop risks, and incrementing x to terminate and print sequences such as even numbers.

Explore break and continue statements in for, while, and do-while loops, learning how break exits a loop and continue skips an iteration through practical script.js examples.

Explore how switch case selects logic by variable value, with cases for each day, a default for invalid days, and the need for break to avoid fall-through.

Explore functions as reusable blocks of code that perform specific tasks, such as login and logout, and learn how parameters customize input for reuse across developers.

Continue the overview on functions in JavaScript, illustrating function definitions, return statements, and the difference between built-in and user-defined functions with practical examples like a plus b and console.log.

Explore anonymous functions and arrow functions in JavaScript, compare them with traditional functions, store and call them from variables, and handle parameters.

Explore JavaScript objects, including key-value pairs, properties, and methods, through examples like employee and student details with dot and bracket access.

Explore how arrays, a reference data type, store multiple values and how to access, modify, and remove items with zero-based indexing, length, push, unshift, splice, pop, and shift.

Demo how a for loop iterates an array using indices and length, then apply for each to call a function on every element, printing each value.

Explore how a class serves as a blueprint for objects, define a method inside the class, and create objects with the new keyword to call the method.

Explore how constructors operate inside a class, including default and parameterized forms, and how creating an object with the new keyword auto-executes constructor code.

Learn how the this keyword refers to the current class instance. Explore how the super keyword accesses the parent class constructors, properties, and static properties and methods.

This lecture demonstrates using the super keyword to access a parent class method from a child class, notes that properties use this dot, and that constructors will be covered next.

Learn how a constructor initializes objects in JavaScript using classes and the new keyword, including default constructors and parameterized data inputs such as name and price.

Learn how to define a constructor function in JavaScript, use the new operator to create objects, and assign this.name and this.age for multiple instances.

Explore es6 features, the sixth edition of javascript, such as let and const, default parameters, arrow functions, classes, import/export, promises, and rest parameters in the context of automation testing.

Explore how to organize code with modules by converting functions into exported modules, importing them across files, and improving maintainability and reusability in automation projects.

detox is an open-source end-to-end testing framework for validating react native mobile apps, running on real or virtual devices with fast execution and automatic synchronization across android and ios.

Compare Detox, Appium, and XCUITest for mobile testing, detailing when to use Detox for React Native end-to-end flows, XCUITest for native iOS, and Appium for cross-platform native-hybrid and web apps.

Explore detox gray box testing, leveraging partial internal knowledge and native drivers like Earl Grey and Espresso to automatically synchronize tests, boosting speed, stability, and reducing flakiness.

Configure detox on your machine with a global detox CLI and a project-specific detox, covering prerequisites like node, Xcode, Homebrew, and iOS and Android simulators.

Create a new React Native Expo project, install dependencies, and launch Android and iOS simulators as you prepare to configure Detox for local mobile automation.

Configure detox for a react native project by installing and initializing detox, generating config.js and starter.js, then loading the project in the editor for iOS simulator testing.

Configure detox for an iOS project by updating the detox GPX file to point to the built .app in the Xcode workspace, then run npm install and npm start.

Configure and run Detox tests on an iOS simulator, verify the iPhone 16 Pro is available, start the test suite with npm start, and review failing tests to adjust locators.

Configure a Detox UI testing bundle for an iOS project, switch to text-based element identification, and use before all and before each hooks to fix failing tests.

Demonstrates core Jest concepts in Detox tests, including describe, before all, before each, after all, and after each, and explains how JavaScript and TypeScript syntax relate to async/await and promises.

Jest describe block and lifecycle hooks—beforeAll, beforeEach, afterEach, and afterAll—through a Detox end-to-end test with console logs showing execution order.

Explore how asynchronous execution uses promises, and how async and await convert promises into a synchronous flow for Detox commands by awaiting each promise-returning action.

Explore element identification with the accessibility inspector in Xcode, learn to capture element attributes using by.label, and validate locators in Detox tests on a simulator.

Update the detox configuration to disable app reinstallation for the iOS simulator debug, using behavior settings and session information to launch the app and run subsequent test steps.

Launch already installed apps with detox by updating the detox config to use the app's bundle id and binary path on a booted iOS simulator.

Learn how to identify elements by label using Detox, then perform tap and type actions across a mobile app, validating accessibility labels and navigating through UI kit catalog app.

Identify an element using its text with the by.text() method in detox, leverage the text attribute to locate elements, perform a tap, and validate visibility.

Learn how to retrieve an element's attributes using getAttributes(), print them with console.log, and identify class names like UI table view to understand element details in detox and playwright automation.

Learn how to capture all attributes of every element sharing a class name using getAttributes, returning a JSON array printed to the console from the home screen.

Learn how to identify and interact with a specific element among multiple matches using index-based operations, including atIndex(), zero-based indexing, and tapping the targeted element.

Identify iOS UI elements using by.traits and matcher in Detox and Playwright, working with static text, accessibility traits, and the alerts view through tap actions.

Learn to identify a parent or child element using withAncestor, and verify the target by tracing the view hierarchy with log level trace to ensure accurate taps.

Learn to perform a tap operation on UI elements, using element-based or coordinate-based tapping, with an alerts view showing cancel and ok actions guided by Copilot suggestions.

Identify an alert view's coordinates in Xcode and tap with x and y (85.7, 20.3); however, device changes can shift coordinates, so prefer object identification followed by a tap.

Open the Xcode project, create a UI testing bundle, and load the app in the simulator to identify locators in a detox workflow using the app instance, Pivo, and app.staticText.

Perform multi-tap on a UI element by specifying the tap count and disambiguating multiple targets with an index, using accessibility inspector labels like increment and decrement.

Learn to perform a long press on an element using Detox and Playwright, with optional coordinates or a duration in milliseconds, including a UI kit catalog stepper example.

Learn to perform swipe left, right, up, and down using detox with configurable speed and locator-based targeting on mobile and web apps.

Learn to perform pinch gestures to zoom in and out on iOS apps, using 0–1 for zoom out and values greater than 1 for zoom in, demonstrated on footer labels.

Demonstrates performing a vertical scroll until visibility of a target element, using class name and label selectors to locate 135 and 137 with accessibility inspection and app source code.

Learn to perform a scroll operation in a test by setting direction and offset on a ui scroll view, using class names and app path to drive down or up.

Learn to perform a scroll down until a target element becomes visible, using a class name and offset to locate a label like 135 in a vertical scroll view.

Demonstrate performing scroll to bottom and scroll to top in a mobile/web automation setup with detox and playwright, using a ui scroll view and multiple js tests in vs code.

Enter text into a UI text field in Detox tests by identifying the element, using type text with the desired value, and using tab and return key to close keyboard.

Learn to replace text in a field without the built-in keyword, using replace text and clear text, and simulate backspace and return key presses to manage input.

Capture a screenshot using the take screenshot method, name it automatically, and locate the captured image in the artifacts folder after launching the app and interacting with text fields.

Learn to adjust slider position in a UI kit catalog app by passing a value between 0 and 1, and apply it to multiple sliders via a test script.

Learn to handle a date picker in a UI kit catalog app with setDatePickerDate, using explicit year-month-day formats or a date formatter, and verify the selected date.

Explore the Detox device object and its core commands, including launch app, reload React Native, and terminate app, to control the current device and fetch platform details.

Master the toBeVisible assertion in detox with an example, using optional visibility thresholds (1–100, default 75%) to verify UI kit catalog elements like text, date picker, and sliders.

Demonstrates using expect with to exist, to have text, to have label, and to have id to validate UI elements, including the UI kit catalog and date picker.

Apply Detox waitFor with toHaveValue and withTimeout to verify a text field's value within a 2000 ms explicit wait, ensuring element visibility before proceeding.

Demonstrate using toBeFocused with waitFor and withTimeout to verify a focused element, such as the first text field, in a test, and confirm the script executes successfully.

Configure detox for a real Android device by enabling developer options, USB debugging, and adb, then install wiser and set Android home and SDK paths.

Set up android automation with detox by building a custom app and running npm install, npm start, and npm run android on an android emulator.

Clone the repository on a Mac, install Node.js dependencies with npm install (ignore scripts), set up detox, start Metro bundler with npm start, and build Android app to launch emulator.

Learn to clone the project on Windows, run git config global core.longpaths, install npm, install docs, verify Gradle, and launch Detox for Android with npm start and Gradle build.

Configure detox for android automation in vscode by installing and initializing detox, focusing on android only, and setting up the e2e folder and detox config.

Leverage copilot to fix Detox Android configuration, convert TypeScript to JavaScript, and run the first end-to-end test on a Pixel 5 Android emulator.

Resolve configuration issues causing parallel tests by converting detox to sequential Playwright JavaScript, and run a single end-to-end test on the counter app with the emulator launched.

Identify UI locators using Android Studio's layout inspector. Inspect the component tree and attributes to map tag attributes to element IDs for a Detox app.

Identify and interact with UI elements directly in app.js using testID attributes and element by.id for Detox based android e2e testing, covering a counter with increment, decrement, and reset.

Learn to build end-to-end Detox tests by identifying UI elements with IDs, tapping increment, decrement, and reset buttons, and running a second test sequentially.

Learn to handle text fields in Detox and Playwright by typing text, tapping the return key, replacing text, and using backspace, with test id based locators and practical debugging.

Learn to implement and verify long press interactions in a mobile UI test using app.js, test IDs, and matching the documented iOS actions.

Demonstrates implementing a scroll operation in mobile testing, including scroll up, scroll down, and scroll to bottom, with Android widget scroll view vs UI scroll view.

Automate brightness and volume sliders by scrolling to reveal them and adjusting their positions, then automate a date picker using plus/minus controls and a confirm action.

Learn how to automate a custom date picker with element by id taps, including year, month, and day adjustments, confirmation, and scrolling to bottom, plus capturing screenshots on Android.

Enable USB debugging on a real Android device, copy the ADB name into Detox config, forward port 8081 for the Metro bundler, and run tests with real-device support.

Generate an Android Detox end-to-end test from a simple prompt, creating a test file with app locators to validate the counter demo flow (increment, decrement, reset).

Convert detox code to a page object model by centralizing locators and organizing tests in a dedicated directory. Update detox configurations and generate copilot-assisted e2e tests for Android and iOS.

Learn TypeScript Playwright API testing and web automation by building web API tests with Playwright, leveraging GitHub Copilot and AI script generation.

TypeScript is an open-source, object-oriented language that serves as a superset of JavaScript with type annotations, interfaces, enums, and generics. Code compiles to JavaScript, usable online or locally.

Configure TypeScript across Windows and Mac by installing Visual Studio Code and Node.js, then install TypeScript globally and verify with tsc --version, and explore transpiling vs online compilation.

Download the complete course material, including the folder structure and test scenarios used in TypeScript Playwright, to directly use in future lectures.

Create a config.json at the project root and add a tsconfig.json to enable test script execution for ai-driven mobile and web automation for upcoming test sessions.

Install and authorize GitHub Copilot in Visual Studio, enable the Copilot chat, and experience automatic code prompts that guide you as you write new code.

Configure GitHub Copilot in Visual Studio Code, install the extension, sign in to GitHub, and use the AI pair programmer to write or debug code across Windows and Mac.

Learn how to create a TypeScript program in Visual Studio Code, write a console.log message, compile with tsc, and run the resulting js file with node to print hello student.

Install ts-node, switch to the ts file directory, and run the file with ts-node to execute a TypeScript program and print output like hello student.

Learn to create and run a simple TypeScript program by uninstalling ts-node, executing directly with modern node versions, and using the code runner extension for one-click execution.

Learn primitive data types in TypeScript, define variables with var or let, and work with numbers, strings, booleans, undefined, and null through examples like account balance and division by zero.

Explore primitive datatypes by defining strings with single or double quotes, booleans, undefined, and null, and print results with console.log while demonstrating string concatenation.

Explore constants in TypeScript, where a constant holds an unchangeable value like a salary of 50,000. Initialize at declaration to avoid reassignment, or else a compile-time error occurs.

Explore arithmetic operators such as addition, subtraction, multiplication, division, modulo, and increment/decrement, with practical TypeScript examples demonstrating how to perform and log results.

Explore the assignment operator and its compound forms (+=, -=, *=, /=, %=) that update a variable in place, with practical examples starting from 20.

Explore how a comparison operator compares values and returns a boolean, covering equal to, not equal to, greater than, less than, and difference between equal to and strictly equal to.

Explore how a logical operator combines boolean values to decide outcomes across multiple conditions, using and, or, and the not operator to invert values.

Explore the ternary operator, a three-part conditional that executes expressions based on a true or false condition, with examples like age checks and type checks.

Explore conditional statements in TypeScript, including if, else, else if, and nested forms; learn syntax with practical examples like age and salary thresholds to control program flow.

Explore switch statements and switch cases, using break and default blocks to handle days like Monday and Tuesday; see how copilot can auto-suggest code as you implement the example.

Learn for loops with practical examples, printing 1–10, testing even and odd numbers up to 20, and using break to stop at 5; includes while and for each loops.

Explains while loops, showing how the condition controls repetition, how incrementing avoids infinite loops, and how to print 1–10, generate even or odd numbers with modulus, and break at 5.

Explore do while and while loops, contrast their condition evaluation and execution order, and illustrate continue to skip iterations in for and while loops with practical examples.

Explore common string methods in TypeScript, including length, concat, charAt, replace, toLowerCase, toUpperCase, split, trim, startsWith, endsWith, and includes, with practical code examples.

Demonstrate arrays in TypeScript by defining single dimensional arrays of strings, numbers, and booleans; access elements by zero-based indices and modify, push, unshift, pop, shift, and loop with length.

Illustrate core array operations like concat, toString, indexOf, includes, sort, slice, splice, and find with practical examples, and show multiple ways to declare arrays and specify their length.

Explore how a for each loop traverses every element in an array, automatically handles initialization and increments, and prints each value with console.log.

Learn how to create named and anonymous functions, pass parameters, and manage returns for reusable code, shown with login/logout scenarios, a sum example, and default values.

Explore anonymous functions in TypeScript, store outputs in variables, and manage optional parameters with defaults and undefined handling in function calls.

Learn function overloading in TypeScript by using the same name with different arguments and return types, including optional parameters, with a single implementation for multiple overloads.

Master arrow functions, or lambda expressions, as anonymous functions without a name or function keyword. Learn single-line return syntax, parameters, and console.log usage with add and greet examples.

Learn how rest parameters let a function accept a variable number of arguments as an array, using three dots in the syntax, and sum them when needed after normal parameters.

Learn how tuples, a fixed-size ordered alternative to arrays, store mixed or same-type data, illustrated with a product name and price and index-based updates.

Delve into tuples with push and pop, optional parameters, and arrays of tuples, then iterate with for loops to print student data in this part 2 lesson.

This lecture explains class as a blueprint for creating objects using a common exam form and demonstrates creating an object with new to access properties and the print data method.

Learn how inheritance connects parent and child classes, using extends to share parent properties and methods with a dog class that accesses both parent and child methods.

demonstrates overriding in TypeScript within a parent-child relationship, showing how child methods and variables replace the parent with the same name, return type, and arguments, using car price.

Learn how to use this and super to access current and parent class data, illustrated with a demo price class, a discount subclass, and constructor and show price examples.

Understand constructors as code blocks that initialize a class when creating an object, running automatically with the new keyword, unlike methods that return values.

Define a class with a parameterized constructor to initialize name, id, and marks. Add a print method to display them, showing how this keyword assigns constructor values.

Explore TypeScript access modifiers—public, private, and protected—and learn how they control visibility of class members, with examples showing inheritance and how defaults behave.

Explore how TypeScript modules enable code reuse by exporting variables, functions, and classes and importing them across files to prevent conflicts.

Define interfaces to specify the structure a class must follow, including properties, methods, and a vehicle example. Show how bike and car implement the interface with a start method.

The lecture compares var and let scoping in TypeScript, showing var is function-scoped and redeclarable, while let is block-scoped and not redeclarable, with 20 for var and errors for let.

Explore Playwright, a Microsoft open-source framework for web automation testing across desktop and mobile browsers, with multi-language support, headless and headed modes, and built-in recording and reporting.

Install playwright on your machine with npm init playwright at latest, choose TypeScript in a VS Code setup, and configure the project with playwright.config.ts and test folders.

Learn to install and use Playwright via the VSCode extension, including running, recording, and debugging tests, with guidance on configuring the project and using the command palette.

Run and debug Playwright tests across multiple browsers using npx Playwright test, leveraging the config file, headless, headed, and ui modes, and test file naming conventions.

Run playwright tests in headed mode across multiple browsers, specify engines and projects, run specific spec files or tests by title, and re-run last failed tests.

Learn to debug Playwright tests using npx playwright test --debug, explore the Playwright Inspector, and use line-number based debugging in VSCode to run single files and step through code.

Explore how to configure Playwright with the define config, set test directories, enable full parallelism, manage retries and CI behavior, and customize reporters for reliable test automation.

Explore Playwright configuration options, focusing on default timeouts of 30,000 ms, how to override them for element waits and assertions, and using the base URL and traces to diagnose issues.

Define and manage Playwright projects in a configuration file, override global settings with project-specific options, select devices such as desktop edge, and control headless execution.

Store a playwright command in package.json scripts as a runner variable and run it with npm run runner one. Define a second runner for another file using runner two.

Explore how Playwright configuration handles retry logic with two retries in CI and a single retry for local execution, including worker behavior and test info logging.

Configure Playwright's browser viewport in the project configuration file by setting width and height, and check port settings to ensure the browser launches maximized.

Learn to run Playwright tests from the VSCode extension, using the test explorer, the show browser option, and per-test or file execution with debugging and UI mode.

Execute Playwright tests in UI mode for a better developing experience, seeing actions, timeline, source code, network traffic, and watch-enabled automatic re-runs.

Learn to skip tests and run a single test using a skip keyword with a two-dot spec file and npx Playwright, and view results in the browser report.

Enable trace in Detox and Playwright reports to analyze test executions with timelines, screenshots, and metadata. Learn options on, off, on first retry, and retain on failure, configured in Playwright.

Create a playwright test by importing the Playwright test, declaring a test with an async function, using page.goto and fixtures to open an app, and handling promises with await.

Learn how to locate web elements using Playwright locators, using id, class, tag name, placeholder, and text in a source demo app for preparing input and click actions.

Learn to automate logging into the Swag Labs demo app with Playwright: locate fields by ID, fill credentials, click login, and manage promises using aviator, aided by the Playwright Inspector.

Learn to identify web elements with Playwright's page.getByRole, prioritizing role-based locators (headings, text boxes, buttons) to mirror user interactions and build reliable tests.

The lecture demonstrates locating form fields by label and by placeholder using get by label and get by placeholder in Playwright, then filling inputs and interacting with elements.

Master locating elements by text and by title with Playwright using page.getByText and page.getByTitle. Learn to handle non-interactive elements, multiple matches, and click interactions in Salesforce and jQuery UI examples.

Learn to locate elements using alt text and data test ids with Playwright, using get by alt text and get by test id, and perform clicks.

Discover CSS locators in Playwright, including CSS selectors and the visible, has text, text, has a text, and ease options. Learn handling multiple matches with first, last, and index.

Use XPath in Playwright to locate elements with the // syntax and attribute values, and apply filters to disambiguate multiple elements by text like flight tracker, as shown on makemytrip.com.

Learn how to identify web elements by parent and child using chained locators in Playwright, including class-based selectors, get by role, and reusable constants for robust automation.

Record tests with Playwright using the VSCode extension or codegen to generate a test script, and inspect actions in recording mode while exploring browser interactions and device emulation.

Explore playwright built-in annotations such as skip, fail, fix me, and slow, and see how they affect test execution, expected failures, and tripled timeouts during runs.

Group tests into a describe block to organize related login tests—valid and invalid credential scenarios—within a single spec file, enabling running the entire group as a test suite.

Learn how to tag individual tests and test groups with user story, regression, and smoke tags in detox/playwright workflows, run targeted suites with grep, and invert to skip tagged tests.

Explore hooks in automated tests using before each, after each, before all, and after all to define preconditions and postconditions for grouped tests, such as opening and closing applications.

Explore assertions in Playwright, including generic and locator assertions, hard vs soft failures, and how to verify post-login states like welcome messages or buttons.

Demonstrates soft assertions in automation tests, showing how expect.soft allows the test to continue after failures while validating the url and page title, and previews upcoming element-based assertions.

Master assertions in Detox and Playwright tests by verifying visibility, presence, enabled/disabled state, and attributes like placeholder and button text using locator and general assertions.

Explore the auto waiting mechanism in Playwright, learn how element state checks and a default timeout of 30,000 milliseconds govern clicks, waits, and explicit waits for selectors and text content.

Show how to implement wait for URL in a login test, using a sample app, illustrating success with the correct URL and timeout after 30 seconds for an incorrect one.

Explore Playwright timeouts, including global, tester, action, and navigation timeouts, with default values and configuration options for per-test and per-command settings, plus auto slow.

Learn how to handle text fields in web automation by filling, clearing, and retrieving values with fill, clear, and input value, using get by role and labels.

Learn to extract text from a button in Playwright by using text content and get by role, then handle multiple buttons with all text content for web automation.

Learn to automate checkbox interactions in Detox and Playwright by using label and role selectors to check, uncheck, and verify states, contrasting with radio buttons, with search suggestions checkbox example.

Learn how to handle radio buttons in Playwright using the check method. Explore three approaches—get by label, get by role, and locator—and how to assert a radio button is checked.

Learn to handle multiple checkboxes by using get by rule, convert to an array with dot all, and uncheck each; explore page.check and locator approaches.

Learn five dropdown selection methods in a Salesforce app: by role (combo box), by label, by XPath, by index, and by value, plus listing all options.

Learn to select multiple options from a dropdown in Playwright by passing an array of values to a listbox using by role, enabling multi-select and verifying options via text content.

Learn to select values from bootstrap dropdowns without a selector tag using Playwright by clicking the dropdown and choosing options via li tags or XPath, handling class-based selectors.

Master mouse interactions and keyboard input in detox and playwright driven automation: perform click, double-click, right-click, hover, click at coordinates, force click, and press sequentially to type with delays.

Learn to handle iframes in Playwright using frame locator and frame objects, including switching to frames by URL or ID, and managing nested frames in complex pages like jQuery UI.

Explore handling tooltips in AI-driven mobile and web automation using Detox and Playwright, retrieving the title attribute to extract tooltip text from frames and print it for verification.

Learn two practical drag and drop techniques in a frame-based web automation context using Playwright: direct drag to a droppable and a hover-plus-mouse action approach, with draggable and droppable locators.

Learn to handle date pickers in Detox & Playwright automation by switching frames, locating the date field, and selecting a specific day or a dynamic next-day date using robust locators.

Extract data from a web table by locating headers and the second row first column value using inner text or text content with table tags, tbody, tr, and td.

Learn to read all values from a web table by looping through rows to extract company values, contact names, and countries, then print the data using text content methods.

Learn how to handle alert dialogues in Playwright, including simple alerts, confirmation alerts, and prompts, using a dialog handler before the triggering action and dialog.accept.

Learn to handle confirmation alerts in automation scripts by using accept for okay and dismiss for cancel, and validate the alert type and message with simple assertions.

Master handling JS prompts in Detox and Playwright by entering values into prompts, validating results with text assertions, and resolving case sensitivity issues to ensure reliable alert interactions.

Demonstrates retrieving and printing auto suggestions for a search field using playwright, locating elements by id or role, and iterating with a for loop over suggestions via XPath.

Upload files with Playwright using set input files on an input tag to handle single or multiple uploads, then delete files by passing an empty array.

Learn to capture screenshots in Playwright for full pages, portions, or elements. Save each image with a timestamp and use locator methods such as get by role for text box.

Learn to capture videos with playwright tests by configuring the video option in the use config, with default off, using on, retain on failure, or on first retry.

Execute Playwright tests on mobile emulators by selecting a device, configuring test info for mobile locators, and running script on the chosen Galaxy Note 3 or iPhone 13 Pro.

Learn to handle multiple windows in Playwright by creating new pages from a context, waiting for a new page before clicks, and managing page lifecycles, including closing pages.

Enable parallel execution in Playwright to run independent tests across workers and save time. Configure fully parallel mode and workers with test examples to optimize performance.

Automate an end-to-end swag labs scenario from login to logout, including add to cart, checkout, fill information, and finish, with copilot-assisted locators and Playwright automation.

Explore built-in Playwright reports such as html, json, junit, dot, and line, and learn to generate them via config or the command line, including multi-report configurations.

Configure a base URL in the Playwright config and use a slash in tests to switch between dev, QA, and staging environments; run with npx playwright test --project dev.

Learn how to create a dot env file to store configuration settings and sensitive information, install and configure dot env, and access variables like url, username, and password via process.env.

Learn how Playwright test fixers encapsulate setup and teardown, enabling isolated, reusable test environments with built-in and custom fixers like page fixer, context fixer, and browser fixers.

Create and reuse a login/logout fixer for end-to-end tests, export fixer two.ts, and wire its login/logout setup with a source demo base url for use with the page fixer.

install the allure Playwright node package, configure the reporter in the Playwright config, generate the Allure report from the results, and open it to view details.

Use the page object model to organize test automation by page, separating locators and actions. Create login, home, cart, info, and overview pages to streamline end-to-end flows, including checkout.

Learn to implement a page object model in TypeScript by creating an exportable login page class with a page fixer and defining username, password, and login locators for Playwright tests.

Define login page locators using the page object model, including username, password, and login button, implement a parameterized async login and an end-to-end test script.

Explore the home page object model: define add to cart, cart logo, side menu, and logout locators, then run an end-to-end test logging in, adding to cart, and logging out.

Explore implementing a page object model for a cart page workflow, from login and home page to proceed to checkout, logout, and transitioning to your information page.

Master the page object model in Detox and Playwright, organizing instance creation, login, add to cart, checkout, and your information page with locators and parameterized methods.

Explore building a page object model for an end-to-end order flow, including overview, finish button, order confirmation, and navigation back to home, with code reuse and updating locators.

Build a page manager within a page object model to centralize login, home, info, overview, and order pages and simplify test automation with detox and playwright.

Explore visual comparisons in Playwright by capturing reference screenshots on first run and comparing them on subsequent runs, with snapshot updates and pixel-difference reporting.

Explore API basics: get, post, put, delete operations, how to pass URL, header, and JSON body, and validate responses with codes like 200, 201, 400, and 500.

Explore rest as a lightweight web service architecture over http, covering restful apis, client–server interactions, statelessness, and common http methods.

Learn to perform API testing with Playwright using the built-in request fixer to send a get request, log the JSON response, and validate the status code with assertions.

Master get requests and JSON parsing to extract values from a single object and from arrays. Retrieve fields like name, manufacturing year, price, and CPU model from the data object.

Master post requests in playwright by sending a JSON body to an endpoint, configuring headers and content-type, and handling responses to extract fields (even with spaces) from the returned data.

Learn to implement put requests to update existing data, handle responses with updated data fields, and work with IDs, posts, and delete operations to complete API workflows.

Learn to read data from a csv file using a csv parser, handle file system access, and retrieve data as an array of objects for data driven testing.

Read data from a CSV file and drive username and password inputs in Playwright tests. Use an array of objects, a for loop, and unique test names.

Learn reading data from a CSV file using a for each loop, switching to backticks and dollar variables for data interpolation, and validating two data sets.

Learn how to read data from a JSON file, accessing the username and password from test data two.json, and run the script successfully.

Learn to read data from a JSON array in tests and loop over items with for each. Use data.username and data.password to drive two test data sets.

Read json data by replacing a for-each loop with a for loop to process two data sets, demonstrating reading json and looping approaches for data access.

Handle an API with basic authorization by encoding a username and token in base64, sending it in the header, and testing with curl or Postman.

Explore the differences between Git and GitHub, learn how local changes move to a remote repository, and manage code with commits, branches, pushes, and pulls.

Push local code to a GitHub remote by initializing a repo, adding and committing files, then linking origin and pushing to master. Resolve common authentication issues with tokens during push.

Learn how to configure GitHub actions for CI/CD with Playwright by creating a playwright.yaml workflow, triggering on push or pull requests, and running tests on a fresh VM.

Execute six playwright tests via GitHub Actions using a playwright.yaml config, always generate a report artifact (index.html) retained for 30 days.