Web Testing with JavaScript

Set up a shared Gitpod environment, sign up for a free account, and configure the server and ports while running npm scripts to test the app with Cypress.

Master end-to-end browser tests by starting a local server with npm start and port 3000, then preview with the globe icon to view the VMC viewer and the test strategy.

Identify the software under test and define a test strategy, prioritizing render correctness and appearance for a simple React web app, while noting security considerations in a demonstration.

Build and run Cypress tests in the exercise files, turning failing tests into passing ones. Code three tests using the Cypress UI, with built-in solutions as guidance.

Learn to code a Cypress test that opens the app served at localhost:3000, using npm run dev, with the VNC viewer and Chrome, to verify browser-based testing.

Address a failing test by ensuring the link opens in a new tab, adjust the assertion, and learn to open links in a new tab in web testing with javascript.

Learn how to test link behavior with Cypress by asserting the link's target attribute (_blank) to open in a new tab, and how to fix href to the correct URL.

Validate a link opens in a new tab by inspecting the HTML target attribute and implement a functional UI test to ensure proper link behavior.

Explore challenges of functional UI tests, including selecting robust locators beyond IDs, such as data-test-id attributes, and manage test environments with browser servers and network dependencies.

Discover how component testing speeds up functional end-to-end checks for JavaScript apps by testing individual components without a running UI, verifying URLs, titles, and attributes with Cypress.

Learn functional testing using internal processes and verify attributes such as target blank. The lecture highlights extra tutorials on web tooling and previews visual testing.

Learn visual end-to-end testing and how to implement it in web apps with Happo. Discover advantages like simpler test creation, no locator dependence, reliability, and broader web and mobile coverage.

Set up a visual test for web testing with JavaScript using Cyprus, sign up for a free trial, configure environment variables, and run npm run test visual.

Set up cross-platform and cross-browser visual tests with Cypress, capturing snapshots across Safari, iPhone 12 Pro, Galaxy S10, and key viewport sizes.

Visual gotchas in web testing come from animations and lazy loading that skew snapshots. Freeze animations or snapshot individual components after content loads, and avoid full-page snapshots for long pages.

Adopt a testing strategy for frontend web applications by combining visual testing, components testing, and end-to-end testing, and access resources at the end to verify real web apps.

Explore visual gotchas in web testing with JavaScript, highlighting the challenges of automating black-box interfaces and the need for closer collaboration with developers to make applications more testable.

Explore visual testing with Harpo by capturing snapshots across viewports, including iPad and mobile, to reveal lazy loading. Learn to manage baselines and diffs for frontend performance and accessibility testing.

Follow setup instructions to install the necessary tools and update the Cyprus configs. Create a test, learn how to run it, and perform perf tests.

Set and evaluate performance, accessibility, SEO, and PWA thresholds, using baselines to decide what passes for your app. Monitor for regressions, not just perfect scores, across environments with Lighthouse.