React Web App Testing With NodeJs, Cypress, and WebDriverIO

Master automated atomic tests and component testing, including login types (HTML, web forms, JWT) and test IDs, in CI/CD pipeline with Cypress, WebDriverIO, React Testing Library, and GitHub actions.

Follow the five sections to explore discrete blocks of activities, then set up by installing Node 14, forking repos, and running npm install and npm start in Visual Studio Code.

Learn to code automated atomic tests that validate a single feature, using UI automation on a sample e-commerce app to explore login, add-to-cart, and checkout, while emphasizing isolation and speed.

Get started with Cypress by installing dependencies, opening the user interface, and practicing automated atomic tests with provided exercises and solutions in the directory.

Break down tests into atomic steps and build automated Cypress tests that bypass login with session storage, verify adding an item to the cart on the inventory page, and checkout.

Open the UI with npm Cypress open in Edge, verify the login is visible, and demonstrate atomic tests that add products to cart without a UI login.

Test logins efficiently by isolating authentication from the rest of the tests, using HTML forms and Jason Web tokens, and explore the application with Cypress and WebDriverIO.

Improve test efficiency by bypassing the UI for login, demonstrating authentication via a server post and cookies to access the dashboard, reducing reliance on UI tests.

Learn to bypass authentication using html web forms in Cypress tests, compare UI versus API login approaches, and manage post requests and cookies to establish sessions.

Explore how JSON web tokens authenticate users in a React and Node app by examining the login flow, token storage in local storage, and Cypress-based tests of the /authenticate API.

Learn to test a React web app with Node.js, Cypress, and WebDriverIO using JWT authentication, bearer tokens, and session storage, validating login/logout and full-coverage CI testing.

Learn efficient react app testing with component tests, test IDs, and reliable link and tab checks, replacing end-to-end tests to demonstrate a scalable testing strategy in a simple app.

Explore component tests that validate a small UI piece in isolation and contrast them with end-to-end tests spanning the full app from dom to database.

Run component tests in React app with npm run test. Locate tests under source/__tests__ and filter by exercise. Component tests render without a server, while Cypress tests verify server startup.

Learn how to add data-test-id attributes to HTML elements for reliable test automation, use test ids with React testing library, and update tests to locate elements by test id.

Learn to validate link behavior with component tests by asserting the href attribute and target, avoiding end-to-end clicks, and plan visual testing for layout across devices.

Learn what visual testing is and how to implement visual end-to-end testing with WebDriverIO and Screener to ensure your app looks right on desktop and mobile.

Learn how to set up and run end-to-end visual tests with WebDriverIO and screener, configure baselines, and review cross-platform visual checks to validate UI changes.

Modify a React web app by swapping the logo, run visual end-to-end tests with WebDriverIO and Screener, review failures, and automate a test pipeline for every commit.

Learn to design and run a fully automated CI/CD pipeline for a React app using GitHub Actions, npm build, and Cypress/WebDriverIO for component tests, functional UI tests, and visual tests.

Conclude the automation best practices workshop by reinforcing testing and development practices and presenting three simple actions to help the planet, with social media updates and ultimate takeaway.com.