Frequently Asked Questions (FAQ) about @anguske/playwright-visual-test for MCP Servers

Q: What is the purpose of @anguske/playwright-visual-test? A: 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.

Q: How do I install @anguske/playwright-visual-test? A: You can install it using npm, yarn, or pnpm with the command: npm install @anguske/playwright-visual-test (or the yarn/pnpm equivalent).

Q: What is MCP in the context of this tool? A: 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.

Q: What are the key features of this tool? A: 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.

Q: How do I configure the tool? A: 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.

Q: What environment variables can I configure? A: 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).

Q: How does the auto-login feature work? A: 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.

Q: What does the TEST_THRESHOLD configuration option do? A: TEST_THRESHOLD sets the pixel difference threshold for image comparison (0-100). A lower value means the test is more sensitive to changes.

Q: How can I ignore dynamic content during visual testing? A: Use the TEST_IGNORE_SELECTORS configuration option to specify a comma-separated list of CSS selectors to ignore during the comparison.

Q: Where are screenshots saved? A: Screenshots are saved in the screenshots folder within your project’s root directory (specified by PROJECT_ROOT).

Q: What files are generated after a comparison? A: Three files are generated: current.png (current test screenshot), baseline.png (baseline screenshot), and diff.png (difference comparison image).

Q: What happens on the first run of the test? A: On the first run, the current screenshot is automatically set as the baseline image.

Q: Can I integrate this tool into my CI/CD pipeline? A: Yes, the tool is designed to be integrated into automated testing workflows, enabling continuous visual regression testing as part of your CI/CD pipeline.

Q: How does this tool integrate with the UBOS platform? A: 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.