React Router (Remix) Quickstart
Learn how to setup visual testing in a React Router (previously Remix) project using Argos.
The best way to integrate Argos with React Router is to setup Playwright in your project.
Prerequisites
To get the most out of this guide, you’ll need to:
1. Install
Get the Argos Playwright SDK.
- npm
- yarn
- pnpm
- bun
npm i --save-dev @argos-ci/playwright
yarn add --dev @argos-ci/playwright
pnpm add --save-dev @argos-ci/playwright
bun add --dev @argos-ci/playwright
2. Setup Argos in your Playwright config
The Argos reporter seamlessly uploads screenshots and traces to Argos in real-time.
import { defineConfig } from "@playwright/test";
export default defineConfig({
// ... other configuration
// Reporter to use
reporter: [
// Use "dot" reporter on CI, "list" otherwise (Playwright default).
process.env.CI ? ["dot"] : ["list"],
// Add Argos reporter.
[
"@argos-ci/playwright/reporter",
{
// Upload to Argos on CI only.
uploadToArgos: !!process.env.CI,
// Set your Argos token (required if not using GitHub Actions).
token: "<YOUR-ARGOS-TOKEN>",
},
],
],
// Setup recording option to enable test debugging features.
use: {
// Collect trace when retrying the failed test.
trace: 'on-first-retry',
// Capture screenshot after each test failure.
screenshot: "only-on-failure",
},
});
3. Take screenshots
Use argosScreenshot
helper to capture stable screenshots in your E2E tests.
import { test } from "@playwright/test";
import { argosScreenshot } from "@argos-ci/playwright";
test("screenshot homepage", async ({ page }) => {
await page.goto("http://localhost:3000");
await argosScreenshot(page, "homepage");
});
Tip: Check out our guides to screenshot multiple pages or capture multiple viewports.
Congratulations on installing Argos! 👏
After committing and pushing your changes, the Argos check status will appear on your pull request in GitHub (or GitLab).
Note: you need a reference build to compare your changes with. If you don't have one, builds will remain orphan until you run Argos on your reference branch.
You can now review changes of your app for each pull request, avoid visual bugs and merge with confidence. Welcome on board!
Additional resources
Join our Discord, submit an issue on GitHub or just send an email if you need help.