Question 1

What is the purpose of @anguske/playwright-visual-test?

Accepted Answer

It's a visual regression testing tool that uses Playwright to automate UI screenshot comparisons, ensuring visual consistency in your application by detecting unintended changes.

Question 2

How do I install @anguske/playwright-visual-test?

Accepted Answer

You can install it using npm, yarn, or pnpm with the command: `npm install @anguske/playwright-visual-test` (or the yarn/pnpm equivalent).

Question 3

What is MCP in the context of this tool?

Accepted Answer

MCP stands for Model Context Protocol.  In this context, it refers to how the visual test tool integrates into a server environment that provides context to AI models, ensuring the UI remains consistent as the AI interacts with the application.

Question 4

What are the key features of this tool?

Accepted Answer

Key features include Playwright integration, support for multiple viewport sizes, configurable comparison threshold, ignoring dynamic content areas, automatic comparison report generation, and MCP protocol integration.

Question 5

How do I configure the tool?

Accepted Answer

Configuration is done through the `mcp.json` file. You can set parameters such as the target URL, viewport size, selectors to ignore, comparison threshold, and auto-login details.

Question 6

What environment variables can I configure?

Accepted Answer

You can configure auto-login variables (username, password, selectors), visual test variables (test selector, wait for selector, threshold, ignore selectors, viewport dimensions), and project configuration (project root path).

Question 7

How does the auto-login feature work?

Accepted Answer

The auto-login feature automatically fills in and submits login forms based on the configured selectors for the username, password, and submit button. It also detects login page redirects using a URL pattern.

Question 8

What does the `TEST_THRESHOLD` configuration option do?

Accepted Answer

`TEST_THRESHOLD` sets the pixel difference threshold for image comparison (0-100). A lower value means the test is more sensitive to changes.

Question 9

How can I ignore dynamic content during visual testing?

Accepted Answer

Use the `TEST_IGNORE_SELECTORS` configuration option to specify a comma-separated list of CSS selectors to ignore during the comparison.

Question 10

Where are screenshots saved?

Accepted Answer

Screenshots are saved in the `screenshots` folder within your project's root directory (specified by `PROJECT_ROOT`).

Question 11

What files are generated after a comparison?

Accepted Answer

Three files are generated: `current.png` (current test screenshot), `baseline.png` (baseline screenshot), and `diff.png` (difference comparison image).

Question 12

What happens on the first run of the test?

Accepted Answer

On the first run, the current screenshot is automatically set as the baseline image.

Question 13

Can I integrate this tool into my CI/CD pipeline?

Accepted Answer

Yes, the tool is designed to be integrated into automated testing workflows, enabling continuous visual regression testing as part of your CI/CD pipeline.

Question 14

How does this tool integrate with the UBOS platform?

Accepted Answer

It can be integrated into UBOS's orchestration capabilities, data connectivity features, and custom AI Agent building processes to ensure visual consistency across all aspects of your AI agent development.

Playwright Visual Test

Resources

Project Details

Recomended MCP Servers

Featured Templates

Pharmacy Admin Panel

AI Chat Bot: Text, Voice, and Video Magic

AI Video Generator

Calculate Time Complexity with ChatGPT API

Talk with Claude 3

Unified Authorization Template

Start your free trial