adilallo
c4a631a5d8
CI Pipeline / test (20) (pull_request) Successful in 2m55s
CI Pipeline / test (18) (pull_request) Successful in 3m32s
CI Pipeline / e2e (webkit) (pull_request) Has been cancelled
CI Pipeline / visual-regression (pull_request) Has been cancelled
CI Pipeline / performance (pull_request) Has been cancelled
CI Pipeline / storybook (pull_request) Has been cancelled
CI Pipeline / lint (pull_request) Has been cancelled
CI Pipeline / build (pull_request) Has been cancelled
CI Pipeline / e2e (chromium) (pull_request) Has been cancelled
CI Pipeline / e2e (firefox) (pull_request) Has been cancelled
84 lines
2.9 KiB
JavaScript
84 lines
2.9 KiB
JavaScript
import { test, expect } from "@playwright/test";
|
|
|
|
test.describe("Checkbox Visual Regression Tests", () => {
|
|
test("Standard mode - unchecked", async ({ page }) => {
|
|
await page.goto("/forms");
|
|
await expect(
|
|
page.locator('[data-testid="standard-unchecked"]'),
|
|
).toBeVisible();
|
|
await expect(page).toHaveScreenshot("checkbox-standard-unchecked.png");
|
|
});
|
|
|
|
test("Standard mode - checked", async ({ page }) => {
|
|
await page.goto("/forms");
|
|
await expect(
|
|
page.locator('[data-testid="standard-checked"]'),
|
|
).toBeVisible();
|
|
await expect(page).toHaveScreenshot("checkbox-standard-checked.png");
|
|
});
|
|
|
|
test("Inverse mode - unchecked", async ({ page }) => {
|
|
await page.goto("/forms");
|
|
await expect(
|
|
page.locator('[data-testid="inverse-unchecked"]'),
|
|
).toBeVisible();
|
|
await expect(page).toHaveScreenshot("checkbox-inverse-unchecked.png");
|
|
});
|
|
|
|
test("Inverse mode - checked", async ({ page }) => {
|
|
await page.goto("/forms");
|
|
await expect(page.locator('[data-testid="inverse-checked"]')).toBeVisible();
|
|
await expect(page).toHaveScreenshot("checkbox-inverse-checked.png");
|
|
});
|
|
|
|
test("Standard mode - hover state", async ({ page }) => {
|
|
await page.goto("/forms");
|
|
const checkbox = page.locator('[data-testid="standard-unchecked"]');
|
|
await checkbox.hover();
|
|
await expect(page).toHaveScreenshot("checkbox-standard-hover.png");
|
|
});
|
|
|
|
test("Standard mode - focus state", async ({ page }) => {
|
|
await page.goto("/forms");
|
|
const checkbox = page.locator('[data-testid="standard-unchecked"]');
|
|
await checkbox.focus();
|
|
await expect(page).toHaveScreenshot("checkbox-standard-focus.png");
|
|
});
|
|
|
|
test("Inverse mode - hover state", async ({ page }) => {
|
|
await page.goto("/forms");
|
|
const checkbox = page.locator('[data-testid="inverse-unchecked"]');
|
|
await checkbox.hover();
|
|
await expect(page).toHaveScreenshot("checkbox-inverse-hover.png");
|
|
});
|
|
|
|
test("Inverse mode - focus state", async ({ page }) => {
|
|
await page.goto("/forms");
|
|
const checkbox = page.locator('[data-testid="inverse-unchecked"]');
|
|
await checkbox.focus();
|
|
await expect(page).toHaveScreenshot("checkbox-inverse-focus.png");
|
|
});
|
|
|
|
test("Disabled state - standard", async ({ page }) => {
|
|
await page.goto("/forms");
|
|
await expect(
|
|
page.locator('[data-testid="standard-disabled"]'),
|
|
).toBeVisible();
|
|
await expect(page).toHaveScreenshot("checkbox-standard-disabled.png");
|
|
});
|
|
|
|
test("Disabled state - inverse", async ({ page }) => {
|
|
await page.goto("/forms");
|
|
await expect(
|
|
page.locator('[data-testid="inverse-disabled"]'),
|
|
).toBeVisible();
|
|
await expect(page).toHaveScreenshot("checkbox-inverse-disabled.png");
|
|
});
|
|
|
|
test("All variations grid", async ({ page }) => {
|
|
await page.goto("/forms");
|
|
await expect(page.locator('[data-testid="checkbox-grid"]')).toBeVisible();
|
|
await expect(page).toHaveScreenshot("checkbox-all-variations.png");
|
|
});
|
|
});
|