WebdriverIO: Automate Front-End Web Application Testing

Plan automated testing before you begin, outlining goals and strategy. Choose the right test automation tool and develop code for automated testing to ensure effective front-end coverage.

Plan automated testing with realistic goals, avoid chasing 100% bugs, and apply the testing pyramid: unit, services, and ui within a continuous integration workflow.

Choose the right test automation tools based on whether you test services, front-end UI, or mobile; weigh code-based versus no-code options, open source, integration needs, and reporting.

Develop front-end code with reliable HTML element identifiers to speed automated tests and improve resilience, while enabling keyboard navigation, direct shortcuts, and test-token generation for API testing.

Design robust automated tests that are independent, focused on specific outcomes, and scalable; isolate test data, reuse functions, follow coding standards, and enforce code reviews with source control.

Learn the basics of git and GitHub. Set up git on your machine and create a professional GitHub account to store, version control, and share your projects.

Set up Git on your machine, install via Windows or Mac, configure your global user name and email, and enable SSH keys to securely push and pull to GitHub.

Create a new repository, initialize git tracking, add and commit files (including a readme), and push changes to a remote origin, demonstrating basic git workflow.

Explore branching and merging by comparing master and feature branches, showing how commits diverge and later merge, and outlining how to resolve merge conflicts.

Learn to switch branches, fetch remote updates, and pull changes to keep your local repo in sync, using master and test branch with origin.

Identify local files to exclude from version control and create a .gitignore to ignore node_modules and other folders, ensuring others run npm install locally.

Learn how to fork a repository on GitHub, creating your own copy in your account, then optionally push changes via pull requests, or work with branches locally.

Refresh HTML and CSS concepts and set up Visual Studio Code with extensions, like Open in Browser, while learning how Explorer, search, and basic source control organize your workflow.

Master a practical HTML refresher by building a simple page in Visual Studio Code, exploring head and body structures, tags, elements, forms, lists, links, images, and attributes.

Master a quick csx refresher by linking a csx file to index.html, styling h1 and h2, and applying class, id, and descendant selectors.

Review the essential JavaScript basics you'll need for this course. Rely on free resources online, including a free JavaScript course and W3Schools, for deeper learning; skip if you're confident.

Master foundational JavaScript concepts for WebdriverIO, including variables, data types, console.log, strings and template literals, arrays, conditionals, loops, and function basics for front-end web application testing.

Explore objects and properties in JavaScript, including a person object with first name, last name, age, and a kids array, and learn JSON format with quoted keys and no comments.

Define JavaScript classes as blueprints, use a constructor to set first name, create instances with new, and implement greeting methods; illustrate inheritance with extends and super.

Learn how to implement JavaScript callback functions using setTimeout and arrow function syntax to execute code after a delay, with practical examples.

Discover how Node.js runs JavaScript outside the browser, enabling local web servers, API development, and front-end work with Angular or React, plus test automation with Protractor or WebDriverIO.

Install Node.js on Windows or macOS, verify with node -v and npm -v in the terminal, and ensure npm pairs with Node.js for WebdriverIO setup.

Learn to execute JavaScript in the terminal using Node, either in interactive mode or from a file like index.js with console.log. Run loops and exit with Ctrl+C.

learn how to install packages with npm, create a package.json with npm init, and manage dependencies by installing locally or globally, including dev dependencies with save-dev.

Explore Chrome developer tools to view HTML, alter the DOM, and execute code in the console to locate elements with JavaScript for automated tests, and install Chrome if needed.

Learn how to open and customize Chrome developer tools, inspect the dom and console, view sources, and use the device toolbar to simulate mobile devices for front-end testing.

Explore the dom by inspecting and highlighting page elements, editing inline text, and toggling styles to see live dom changes and element details.

Execute JavaScript in the Chrome developer tools console to test code, log values, run simple if statements, and inspect the document and dom.

Find elements in the DOM using browser dev tools, using control-F to search by string or CSS selector, copy selectors, and leverage unique ids for precise targeting.

Learn to find elements using JavaScript in the console with document.querySelector and querySelectorAll, and understand zero-based arrays and DOM indexing for selecting dropdown items.

Automate web interactions without a framework using plain javascript and Chrome developer tools. Create reusable scripts by selecting page elements, looping, and validating values with simple logic.

Explore adding user actions by using the console to interact with elements, clicking, retrieving text, and setting input values with the value property, while handling checkboxes and other basic tasks.

Create reusable element variables to simplify long query selectors, improving readability and maintainability by updating a single declaration rather than every use.

Apply simple JavaScript logic in your WebdriverIO tests to validate an input field's value, using if statements, console logs, and else branches to confirm default and blank states.

Learn to loop through an array of page links with a for loop in JavaScript, log each link's text, and push the results into a new array for later use.

Create reusable functions for testing usability in webdriver io, including input text utilities. Implement a for loop to drive multiple inputs with consistent user interaction.

Explore mocha, a JavaScript test framework, and learn how to use mocha to write simple test cases for JavaScript.

Install mocha into the target directory and run npm install to add dependencies and create node_modules and package.json. Configure npm test to execute mocha and show no test files yet.

Write your first mocha test by creating a test folder, requiring node assertions, and wrapping tests in a describe block with it blocks, then run npm test to view results.

Explore webdriverio hooks for tests, including before all tests, after all tests, before each, and after each. See how login once, page refresh, and closing the browser organize test flow.

Master running a single test in a large webdriverio front-end test suite, using it dot only and skip options, and place pending placeholders to scaffold tests.

Explore how to switch between reporters in WebdriverIO, including the default spec reporter, dot reporter, the me reporter, and the landing reporter, with passes, pending, and failures.

Explore how Chai, an assertion library, plugs into Mocha to verify expected outcomes and enable flexible assertions for front-end testing with WebdriverIO.

Install mocha and chai in a brand-new project, create and update package.json, and run npm test to confirm dependencies while noting no tests yet.

Learn how to use the chai assertion library with three assertion types across BDD and TDD styles, including expect, should, and assert, and explore syntax differences and practical guidance.

Learn to write robust front-end tests using expect assertions with chai in Node.js tests, covering to equal, to be true/false checks, custom messages, and loop-based validations for readability.

Learn how to use should assertions in WebdriverIO, compare should and expect styles, demonstrate should equal, boolean checks, custom failure messages, and guidance to pick a single assertion style.

Learn to write and validate assertions in WebdriverIO using Mocha and Chai, including cert checks, equal comparisons, and boolean validations, with pass/fail results.

Learn to enforce coding standards with linting using ESLint in VS Code, and install Node.js to configure the ESLint extension for consistent spacing, indentation, and syntax checks.

Install eslint with npm, choosing local or global installation, then run eslint --init to adopt the Airbnb JavaScript style and generate an .eslintrc.json.

Practice a practical walkthrough for fixing ESLint errors using the Airbnb style guide, addressing indentation, quotes, semicolons, and template literals, while handling cross-platform line endings.

Update rules to tailor code style, including semicolons, line breaks, and quotes, by adjusting the Eastland RC and ESLint rule settings to suit your project.