Skip to content

Commit 398b113

Browse files
astahmerastahmer
committed
setup (test not passing)
1 parent 9bbc789 commit 398b113

File tree

8 files changed

+809
-19
lines changed

8 files changed

+809
-19
lines changed

‎.github/workflows/playwright.yml

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
name: Playwright Tests
2+
on:
3+
push:
4+
branches: [ main, master ]
5+
pull_request:
6+
branches: [ main, master ]
7+
jobs:
8+
test:
9+
timeout-minutes: 60
10+
runs-on: ubuntu-latest
11+
steps:
12+
- uses: actions/checkout@v4
13+
- uses: actions/setup-node@v4
14+
with:
15+
node-version: lts/*
16+
- name: Install dependencies
17+
run: npm install -g pnpm && pnpm install
18+
- name: Install Playwright Browsers
19+
run: pnpm exec playwright install --with-deps
20+
- name: Run Playwright tests
21+
run: pnpm exec playwright test
22+
- uses: actions/upload-artifact@v4
23+
if: always()
24+
with:
25+
name: playwright-report
26+
path: playwright-report/
27+
retention-days: 30

‎.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,7 @@ stats-*.json
2828
## Panda
2929
styled-system
3030
styled-system-studio
31+
/test-results/
32+
/playwright-report/
33+
/blob-report/
34+
/playwright/.cache/

‎e2e/atomic.test.ts

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
import { test, expect } from "@playwright/test";
2+
3+
test("test", async ({ page }) => {
4+
// Inspect element
5+
await page.goto("http://localhost:4173/");
6+
await page
7+
.getByRole("button", { name: "Select an element to inspect" })
8+
.click();
9+
10+
// Toggle CSS declarations
11+
await page.getByText("Atomic CSS Devtools [data-").click();
12+
expect(page.getByText("Atomic CSS Devtools [data-")).toHaveCSS(
13+
"font-size",
14+
"2.25rem"
15+
);
16+
17+
await page.getByText("font-size", { exact: true }).click();
18+
expect(page.getByText("Atomic CSS Devtools [data-")).not.toHaveCSS(
19+
"font-size",
20+
"2.25rem"
21+
);
22+
23+
await page.getByText("font-size", { exact: true }).click();
24+
expect(page.getByText("Atomic CSS Devtools [data-")).toHaveCSS(
25+
"font-size",
26+
"2.25rem"
27+
);
28+
29+
expect(page.getByText("Atomic CSS Devtools [data-")).toHaveCSS(
30+
"color",
31+
"#eab308"
32+
);
33+
await page.getByText("color", { exact: true }).click();
34+
35+
expect(page.getByText("Atomic CSS Devtools [data-")).not.toHaveCSS(
36+
"color",
37+
"#eab308"
38+
);
39+
await page.getByLabel("color", { exact: true }).click();
40+
expect(page.getByText("Atomic CSS Devtools [data-")).toHaveCSS(
41+
"color",
42+
"#eab308"
43+
);
44+
45+
// Group declarations by layer
46+
await page.getByLabel("Group elements by @layer").click();
47+
48+
expect(page.getByText("color", { exact: true })).toBeVisible();
49+
await page.getByRole("button", { name: "▼ @layer utilities (3)" }).click();
50+
expect(page.getByText("color", { exact: true })).not.toBeVisible();
51+
52+
await page.getByRole("button", { name: "▶︎ @layer utilities (3)" }).click();
53+
expect(page.getByText("color", { exact: true })).toBeVisible();
54+
55+
expect(page.getByText("box-sizing", { exact: true })).toBeVisible();
56+
await page.getByRole("button", { name: "▼ @layer base (4)" }).click();
57+
58+
expect(page.getByText("box-sizing", { exact: true })).not.toBeVisible();
59+
await page.getByRole("button", { name: "▶︎ @layer base (4)" }).click();
60+
expect(page.getByText("box-sizing", { exact: true })).toBeVisible();
61+
62+
expect(
63+
page.getByRole("button", { name: "▼ @layer utilities (3)" })
64+
).toBeVisible();
65+
await page.getByLabel("Group elements by @layer").click();
66+
67+
expect(
68+
page.getByRole("button", { name: "▼ @layer utilities (3)" })
69+
).not.toBeVisible();
70+
await page.getByLabel("Toggle layer visibility").click();
71+
expect(
72+
page.getByRole("button", { name: "▼ @layer utilities (3)" })
73+
).toBeVisible();
74+
75+
await page.getByLabel("utilities(3)").uncheck();
76+
expect(
77+
page.getByRole("button", { name: "▼ @layer utilities (3)" })
78+
).not.toBeVisible();
79+
80+
await page.getByLabel("utilities(3)").check();
81+
expect(
82+
page.getByRole("button", { name: "▼ @layer utilities (3)" })
83+
).toBeVisible();
84+
85+
expect(
86+
page.getByRole("button", { name: "▼ @layer reset (6)" })
87+
).toBeVisible();
88+
await page.getByText("reset(6)").click();
89+
90+
expect(
91+
page.getByRole("button", { name: "▼ @layer reset (6)" })
92+
).not.toBeVisible();
93+
await page.getByText("reset(6)").click();
94+
expect(
95+
page.getByRole("button", { name: "▼ @layer reset (6)" })
96+
).toBeVisible();
97+
98+
// Inspect another element
99+
await page
100+
.getByRole("button", { name: "Select an element to inspect" })
101+
.click();
102+
await page
103+
.getByRole("button", { name: "Select an element to inspect" })
104+
.click();
105+
106+
expect(page.getByText("min-width", { exact: true })).toBeVisible();
107+
await page.getByRole("button", { name: "▼ @layer recipes (8)" }).click();
108+
109+
expect(page.getByText("min-width", { exact: true })).not.toBeVisible();
110+
await page.getByRole("button", { name: "▶︎ @layer recipes (8)" }).click();
111+
112+
expect(page.getByText("border-radius", { exact: true })).toBeVisible();
113+
await page
114+
.getByRole("button", { name: "▼ @layer recipes._base (24)" })
115+
.click();
116+
117+
expect(page.getByText("border-radius", { exact: true })).not.toBeVisible();
118+
await page
119+
.getByRole("button", { name: "▶︎ @layer recipes._base (24)" })
120+
.click();
121+
122+
expect(
123+
page.getByRole("button", { name: "▼ @layer recipes._base (24)" })
124+
).toBeVisible();
125+
await page.getByText("recipes._base(24)").click();
126+
expect(
127+
page.getByRole("button", { name: "▼ @layer recipes._base (24)" })
128+
).not.toBeVisible();
129+
await page.getByLabel("recipes._base(24)").click();
130+
expect(
131+
page.getByRole("button", { name: "▼ @layer recipes._base (24)" })
132+
).toBeVisible();
133+
134+
expect(
135+
page.getByRole("button", { name: "▼ <no_media> (8)" })
136+
).not.toBeVisible();
137+
await page.getByLabel("Group elements by @media").click();
138+
139+
expect(page.getByRole("button", { name: "▼ <no_media> (8)" })).toBeVisible();
140+
await page.getByRole("button", { name: "▶︎ <no_media> (8)" }).click();
141+
142+
//
143+
// await page.getByPlaceholder("Filter").click();
144+
// await page.getByPlaceholder("Filter").fill("button");
145+
// await page.locator('[id="tooltip\\:\\:r1b9\\:\\:trigger"] > span').click();
146+
// await page.getByPlaceholder("Filter").click();
147+
// await page.getByPlaceholder("Filter").press("Meta+a");
148+
// await page.getByPlaceholder("Filter").fill("gap");
149+
// await page.locator(".w_16px").first().click();
150+
// await page.getByPlaceholder("Filter").click();
151+
// await page.getByPlaceholder("Filter").fill("gap");
152+
// await page.getByText("gap").click();
153+
// await page.getByText("gap").click();
154+
// await page.locator(".w_16px").first().click();
155+
// await page.getByPlaceholder("Filter").click();
156+
// await page.locator("#inline-styles").getByText("}").click();
157+
// await page
158+
// .getByRole("button", { name: "Select an element to inspect" })
159+
// .click();
160+
// await page.getByText("Atomic CSS Devtools [data-").click();
161+
// await page.getByText("Atomic CSS Devtools [data-").click();
162+
// await page.getByText("element.style{").click();
163+
// await page.locator("#editable-key").fill("color");
164+
// await page.locator("#editable-key").press("Tab");
165+
// await page.locator("#editable-value").fill("red");
166+
// await page.locator("#editable-value").press("Tab");
167+
// await page.getByText("color:red;").click();
168+
// await page.getByText("red").click();
169+
// await page.getByText("red").press("ArrowRight");
170+
// await page.getByText("red").press("ArrowRight");
171+
// await page.getByText("red").press("ArrowRight");
172+
// await page.getByText("color:red;").click();
173+
// await page
174+
// .locator("div")
175+
// .filter({ hasText: "Atomic CSS Devtools [data-" })
176+
// .nth(3)
177+
// .click();
178+
// await page.getByText("Atomic CSS Devtools [data-").click();
179+
});

‎e2e/example.spec.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { test, expect } from "@playwright/test";
2+
3+
test.skip("has title", async ({ page }) => {
4+
await page.goto("https://playwright.dev/");
5+
6+
// Expect a title "to contain" a substring.
7+
await expect(page).toHaveTitle(/Playwright/);
8+
});
9+
10+
test.skip("get started link", async ({ page }) => {
11+
await page.goto("https://playwright.dev/");
12+
13+
// Click the get started link.
14+
await page.getByRole("link", { name: "Get started" }).click();
15+
16+
// Expects page to have a heading with the name of Installation.
17+
await expect(
18+
page.getByRole("heading", { name: "Installation" })
19+
).toBeVisible();
20+
});

‎package.json

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "atomic-css-devtools",
33
"description": "manifest.json description",
44
"private": true,
5-
"version": "0.0.6-dev",
5+
"version": "0.0.7-dev",
66
"type": "module",
77
"scripts": {
88
"dev": "wxt",
@@ -15,7 +15,11 @@
1515
"postinstall": "wxt prepare",
1616
"test": "vitest",
1717
"typecheck": "tsc --noEmit",
18-
"play": "vite"
18+
"play": "vite",
19+
"e2e": "pnpm exec playwright test",
20+
"e2e:ui": "pnpm exec playwright test --ui",
21+
"e2e:codegen": "pnpm exec playwright codegen localhost:4173",
22+
"e2e:preview": "vite --port 4173"
1923
},
2024
"imports": {
2125
"#components/*": "./components/*",
@@ -42,6 +46,8 @@
4246
"devDependencies": {
4347
"@pandacss/dev": "^0.37.1",
4448
"@park-ui/panda-preset": "^0.36.1",
49+
"@playwright/test": "^1.43.1",
50+
"@types/node": "^20.12.7",
4551
"@types/react": "^18.2.46",
4652
"@types/react-dom": "^18.2.18",
4753
"@vitejs/plugin-react": "^4.2.1",

‎playwright.config.ts

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import { defineConfig, devices } from '@playwright/test';
2+
3+
/**
4+
* Read environment variables from file.
5+
* https://github.com/motdotla/dotenv
6+
*/
7+
// require('dotenv').config();
8+
9+
/**
10+
* See https://playwright.dev/docs/test-configuration.
11+
*/
12+
export default defineConfig({
13+
testDir: './e2e',
14+
/* Run tests in files in parallel */
15+
fullyParallel: true,
16+
/* Fail the build on CI if you accidentally left test.only in the source code. */
17+
forbidOnly: !!process.env.CI,
18+
/* Retry on CI only */
19+
retries: process.env.CI ? 2 : 0,
20+
/* Opt out of parallel tests on CI. */
21+
workers: process.env.CI ? 1 : undefined,
22+
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
23+
reporter: 'html',
24+
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
25+
use: {
26+
/* Base URL to use in actions like `await page.goto('/')`. */
27+
// baseURL: 'http://127.0.0.1:3000',
28+
29+
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
30+
trace: 'on-first-retry',
31+
},
32+
33+
/* Configure projects for major browsers */
34+
projects: [
35+
{
36+
name: 'chromium',
37+
use: { ...devices['Desktop Chrome'] },
38+
},
39+
40+
{
41+
name: 'firefox',
42+
use: { ...devices['Desktop Firefox'] },
43+
},
44+
45+
{
46+
name: 'webkit',
47+
use: { ...devices['Desktop Safari'] },
48+
},
49+
50+
/* Test against mobile viewports. */
51+
// {
52+
// name: 'Mobile Chrome',
53+
// use: { ...devices['Pixel 5'] },
54+
// },
55+
// {
56+
// name: 'Mobile Safari',
57+
// use: { ...devices['iPhone 12'] },
58+
// },
59+
60+
/* Test against branded browsers. */
61+
// {
62+
// name: 'Microsoft Edge',
63+
// use: { ...devices['Desktop Edge'], channel: 'msedge' },
64+
// },
65+
// {
66+
// name: 'Google Chrome',
67+
// use: { ...devices['Desktop Chrome'], channel: 'chrome' },
68+
// },
69+
],
70+
71+
/* Run your local dev server before starting the tests */
72+
// webServer: {
73+
// command: 'npm run start',
74+
// url: 'http://127.0.0.1:3000',
75+
// reuseExistingServer: !process.env.CI,
76+
// },
77+
});

0 commit comments

Comments
 (0)