WebDriverIO-WDIO-TS-BDD-Cucumber-GitLab-CI/CD-Docker-Grid

Install node and TypeScript on macOS using Homebrew, verify versions with node and npm commands, and set up a project directory to write and compile TypeScript code.

Install and configure IntelliJ on macOS via terminal, create or open a project directory, and set up essential plugins like cucumber and web driver IO for future testing.

Install node.js on windows, verify node and npm versions, then install typescript globally with npm and confirm the typescript version 4.8.4.

Install IntelliJ on Windows by downloading from JetBrains, choosing community or ultimate, then configure plugins via settings to enhance code writing for the project.

Install and configure IntelliJ plugins on Windows, mirroring the Mac setup. Note that the community version may lack some plugins, which require the paid version for full access.

Explore IntelliJ settings and plugins, enable actions on save to reformat and rearrange code, adjust editor font, and use the terminal to verify node, NPM, and TypeScript versions.

Create a simple TypeScript test file, compile it to JavaScript, and run the generated JavaScript to verify output; learn three steps and how TypeScript supports object oriented concepts with IntelliSense.

Explore how to work with variables, including constants and let, as buckets to hold numbers and strings, perform addition, and print results to the console.

Explore conditional checks and if-else by building a function that takes two numbers and a print flag, then prints or returns the result, compiled with tsc.

Explore literal types in TypeScript by defining a custom union type (like 'full' or 'user'), using it to conditionally print a name, and compiling and running the code.

Explore array types in TypeScript using square brackets to store multiple hobbies and other data, including any type, with for loop and for each loop printing.

Explore object types in TypeScript by creating a sample object with keys like name, location, and year, accessing properties via dot notation and printing them with console.log.

Define object types in TypeScript to enforce name and location as strings, hobbies as string arrays, and year as a number, boosting type safety and catching errors at compile time.

Master union types in TypeScript with the pipe operator to accept string, number, or boolean inputs, and see how a function adds numbers or concatenates strings using console.log.

Explore the concept of functions by creating a simple add two numbers function that returns the sum and prints the result using console log.

Configure the TypeScript compiler with tsconfig.json, set root and out directories, compile ts files to js with tsc, and run output via node in an npm project.

Define a class as a blueprint with variables and methods, including static and non-static members, and show how to access them via the class or an object.

Demonstrate the constructor concept inside a class by showing how it executes automatically when you create an object, with a practical example that prints information from the constructor.

Explore public and private access specifiers, see how public members are accessible everywhere while private members stay inside the class, and learn to expose only necessary methods.

Explain an interface as a contract between a class, listing required members; show implementing classes like base mobile and smartphone with model, price, color, and a print method.

Learn how a child class extends a parent class to inherit its members and add its own, using a bus extending a car as a demonstration, with constructors printing order.

Learn how the export keyword makes a class or its members accessible outside the file and enables import across files.

Explore WebdriverIO, a free open-source tool for mobile and web testing with documentation and plugins. Learn its lack of official TypeScript examples and Docker image, and the driver–browser synchronization risk.

Explore WebdriverIO documentation, including installation, setup, framework options (cucumber, jasmine), recording tests, migrations between major versions, and CI/CD and cloud service integrations for cross-browser testing.

Set up a WebDriverIO TypeScript project for cucumber BDD by initializing an npm project, configuring tsconfig, and running WebDriverIO with chrome driver, feature files, and step definitions.

Create a simple feature and step definitions, configure feature and step directories, implement a Google home page test with WDIO, and run it via npx wdio run.

explore three ways to run WebDriverIO tests: in the terminal with the wdio command, via npm scripts, and through IDE run configurations.

Extend a feature by adding and implementing a new step in step definitions, then verify the page title (for example Google) using the get title function.

Learn to implement assertions in WebDriverIO by defining a section and validating the page title with equal, not equal, and contains checks, then explore case sensitivity.

Explore how to set breakpoints, step through code, and run a WDIO Cucumber test in debug mode, inspecting actual versus expected page titles and variables.

Run cucumber tests by tags with WebdriverIO and BDD, selecting specific scenarios via tag expressions in config or npm scripts.

Run tests in headless Chrome to execute in the background without opening a browser, improving speed and stability in your ci/cd pipeline by configuring Chrome options and disabling sandbox.

Install the spec reporter package for WebDriverIO, configure it in the reporter section of the config, and run tests to view features, scenarios, and steps executed in the console.

Configure max instances per browser in capabilities to enable parallel test runs, then launch multiple Chrome, Firefox, and Safari instances to execute multiple feature files and scenarios in parallel.

Discover how to pass values between steps in a single cucumber scenario by using a world class object, initializing with a constructor, and accessing via this keyword in TypeScript.

Demonstrates cross-browser testing with WebDriverIO in Chrome, Firefox, and Safari by configuring browser capabilities, installing gecko and safari drivers, and running parallel tests across three browsers.

Learn how cucumber hooks run code at different test stages—before feature, before scenario, before step, and after step or scenario—to manage setup, reporting, and cleanup in your WDIO cucumber framework.

Explore locator strategies to identify page elements across web pages, using id, class, css selectors, xpath, link text, and partial text to reliably perform actions and verifications.

Learn to locate and click hyperlinks on a web page using WebDriverIO with ts, bdd and Cucumber, including link text selectors, element locators, and simple wait strategies.

Master interacting with input boxes in webdriverio by clicking links, selecting elements by name, and typing values—including numeric inputs—using generic selectors and reusable steps.

Explore handling buttons, radio buttons, and checkboxes in automated tests using WebDriverIO, creating feature steps, using selectors to click elements, and validating button behavior in a cucumber-style workflow.

Demonstrates handling a dropdown list in a WebDriverIO BDD setup: open the site, click the dropdown, select option two by visible text, wait briefly, and close the browser.

Learn to handle javascript alerts in a web automation flow by clicking the alert, accepting it to produce result text, and validating the alert flow with step definitions.

Discover how to scroll to a specific element in a page using WebDriverIO, including feature file setup, step definitions, and the scroll to element action.

Configure cucumber json reporters, run tests with feature or scenario tags, and generate an html multi-feature report from json files.

Learn how to register for GitLab, create a project, clone to your local machine, push code, and run a simple GitLab CI/CD pipeline with a YAML file and basic integrations.

Learn to clone a GitLab repository, add and commit new files, push changes, and verify updates in the project, laying the groundwork for a GitLab CI/CD pipeline.

Add a node-specific .gitignore file to the repository using a template, include ignoring the idea folder, then commit, push, and pull the latest from main.

Create a simple GitLab CI YAML file with stages and a job running scripts via WDIO on a Docker runner to illustrate a first GitLab pipeline.

Discover solid advantages of WebDriverIO: no browser instance required, direct element actions via selectors, flexible command execution, and a rich community of plugins for Docker grid integration and framework building.

Develop an end-to-end testing framework for a demo website, performing login, product selection, cart verification of name, description and price, checkout, and order confirmation.

Explore the framework architecture for a WebDriverIO, TypeScript, BDD-Cucumber project. Outline a reusable page-by-page structure with JSON selectors, core utilities, and common step definitions.

Create a wdio typescript cucumber framework structure in IntelliJ, setting up folders (pages, source, features, support), configuring packages and GitLab CI/CD, and aligning feature files with step definitions.

Create first sample feature with framework, configure preparation and on complete hook to generate a cucumber HTML report from json files in the temp folder, and run a step.

Update the gitignore to exclude dot tmp and other temporary files, then commit and push changes to the GitHub repository while verifying the GitLab pipeline.

Implement a login in a WebDriverIO BDD Cucumber framework by extracting element locators. Read JSON test data, map page objects, and perform set value, click, and pause actions.

Refactor the framework to remove duplicate code by consolidating selectors and inputs, converting time values to strings, and creating reusable one-liner steps for click, set input, and post actions.

Add debugging lines to WebDriverIO action functions to print console logs for clicking elements, entering values, and maximizing the window, improving test visibility and reporting in BDD Cucumber workflows.

Add locators from all pages, including inventory, cart, and checkout steps, within a WDIO framework to enable end-to-end scenarios and a reliable logout flow.

Implement an end-to-end scenario: login, add to cart, checkout, enter first name, last name, and post code, verify checkout complete, then return home and logout.

Learn to implement the check element state function in WebDriverIO-WDIO-TS-BDD-Cucumber-GitLab-CI/CD-Docker-Grid to wait for an element to reach a desired state, such as clickable or displayed, with configurable retries and interval.

Implement a check element contains text in a WebDriverIO test, extracting the element's selector, obtaining actual text with a wait, and asserting equality with the expected text.

Learn to add assertion steps that verify elements are displayed and clickable before actions in WebDriverIO tests, reducing flakiness and improving test stability and speed.

Explore end-to-end execution and report analysis by validating the feature report and outlining how to extend the framework with pages, actions, checks, and docker-ready pipelines.

Learn to implement positive and negative element text checks in WebDriverIO with TS and Cucumber, aligning step definitions for presence and absence, and integrating with GitLab CI/CD.

Demonstrate negative check steps by verifying the element states, such as not displayed, not existing, and not clickable, updating step definitions to handle both positive and negative scenarios.

Commit and push the end-to-end framework to the GitLab repository, verify files and pipeline status, and prepare to explore Docker and advanced CI/CD pipelines in upcoming modules.

Design and implement a two-stage GitLab CI pipeline that builds the project, executes tests, and publishes reports using the Selenium standalone Docker image from Docker Hub.

Replace the chrome driver with selenium standalone service in WDIO config, install the selenium standalone service, and run tests in Chrome using a separate config and script.

Learn how to configure a GitLab CI pipeline with a WDIO Docker image to build and test in two stages, using npm install, npm run, and artifacts for node_modules.

Publish the test execution report as a pipeline artifact in a GitLab ci/cd workflow by exposing the report folder, then open the html index to review results.