docs: add README logo

.github/workflows/test.yml

@@ -0,0 +1,54 @@
+name: Test
+
+on:
+  pull_request:
+    types:
+      - opened
+      - reopened
+      - synchronize
+      - ready_for_review
+
+permissions:
+  contents: read
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number }}
+  cancel-in-progress: true
+
+jobs:
+  test:
+    name: Lint, type-check, and test
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.14.1
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Lint
+        run: pnpm exec eslint .
+
+      - name: Type-check
+        run: pnpm compile
+
+      - name: Unit tests
+        run: pnpm test:unit
+
+      - name: Install Playwright browsers
+        run: pnpm exec playwright install --with-deps chromium
+
+      - name: E2E tests
+        run: pnpm test:e2e

README.md

@@ -1,8 +1,12 @@
-# CSS-Diff
+<div align="center">
+  <img src="./img/logo.png" alt="CSS-Diff logo" width="160">
 
-English | [简体中文](./README.zh-CN.md)
+  <h1>CSS-Diff</h1>
 
-CSS-Diff is a DevTools sidebar extension for comparing the computed CSS of two DOM elements. It is built for frontend debugging: select two elements in the Elements panel, then inspect what changed, search for a property, and copy a CSS declaration with one click.
+  <p>English | <a href="./README.zh-CN.md">简体中文</a></p>
+
+  <p>CSS-Diff is a DevTools sidebar extension for comparing the computed CSS of two DOM elements. It is built for frontend debugging: select two elements in the Elements panel, then inspect what changed, search for a property, and copy a CSS declaration with one click.</p>
+</div>
 
 ![Screenshot](https://github.com/Jevin0/css-diff-devtools/blob/main/img/screenshot.png?raw=true)
 

README.zh-CN.md

@@ -1,8 +1,12 @@
-# CSS-Diff
+<div align="center">
+  <img src="./img/logo.png" alt="CSS-Diff logo" width="160">
 
-[English](./README.md) | 简体中文
+  <h1>CSS-Diff</h1>
 
-CSS-Diff 是一个用于比较两个 DOM 元素计算后 CSS 的 DevTools 侧边栏扩展。它面向前端调试场景：在 Elements 面板中选择两个元素，即可查看哪些样式发生了变化、搜索指定属性，并一键复制 CSS 声明。
+  <p><a href="./README.md">English</a> | 简体中文</p>
+
+  <p>CSS-Diff 是一个用于比较两个 DOM 元素计算后 CSS 的 DevTools 侧边栏扩展。它面向前端调试场景：在 Elements 面板中选择两个元素，即可查看哪些样式发生了变化、搜索指定属性，并一键复制 CSS 声明。</p>
+</div>
 
 ![Screenshot](https://github.com/Jevin0/css-diff-devtools/blob/main/img/screenshot.png?raw=true)
 

playwright.config.ts

@@ -1,20 +1,5 @@
-import { existsSync } from 'node:fs'
-import process from 'node:process'
 import { defineConfig } from '@playwright/test'
 
-const chromiumExecutablePath = [
-  process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE,
-  'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe',
-  'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe',
-  'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe',
-  'C:\\Program Files\\Microsoft\\Edge\\Application\\msedge.exe',
-  '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
-  '/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge',
-  '/usr/bin/google-chrome',
-  '/usr/bin/chromium',
-  '/usr/bin/chromium-browser',
-].find((value): value is string => Boolean(value && existsSync(value)))
-
 export default defineConfig({
   testDir: './tests/e2e',
   timeout: 60_000,
@@ -25,9 +10,6 @@ export default defineConfig({
   reporter: 'list',
   use: {
     browserName: 'chromium',
-    launchOptions: chromiumExecutablePath
-      ? { executablePath: chromiumExecutablePath }
-      : undefined,
     trace: 'retain-on-failure',
   },
 })