adilallo
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");
|
|
});
|
|
});
|