Replace cypress with playwright

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 18
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npx playwright test
+    - uses: actions/upload-artifact@v3
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -38,4 +38,10 @@ next-env.d.ts
 #extension
 /extensionReqs/extension.*
 /extension
-extension.crx
+extension.crx
+**/*.zip
+
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

components/AliasedEmails.tsx

@@ -27,18 +27,15 @@ import { useEffect, useState } from "react"
 import { useAtom } from "jotai"
 import { colorSelector } from "@/utils/colorSelector"
 import { localCopyHistoryAtom } from "./global/CopyHistory"
+import { AliasType } from "@/components/types"
 
 type Props = { extension?: boolean }
-type Alias = {
-  label: string
-  value: string
-}
 
 export default function InputCreator({ extension }: Props) {
   const [email, setEmail] = useLocalStorage({ key: "email", defaultValue: "" })
   const [aliases, setAliases] = useLocalStorage({
     key: "aliases",
-    defaultValue: [] as Alias[],
+    defaultValue: [] as AliasType[],
   })
   const [selectedAlias, setSelectedAlias] = useLocalStorage({
     key: "selectedAlias",

components/global/CopyHistory.tsx

@@ -15,6 +15,7 @@ import {
 import { IconCopy } from "@tabler/icons-react"
 import { colorSelector } from "@/utils/colorSelector"
 import { useRouter } from "next/router"
+import { CopyHistoryType } from "@/components/types"
 
 type Props = {
   type?: "email" | "text"
@@ -23,20 +24,9 @@ type Props = {
   scrollThreshold: number
 }
 
-export type CopyHistory = {
-  id: number
-  type: string
-  value: string
-  timestamp?: number
-}
-
-interface GroupedCopyHistory {
-  [dateKey: number]: CopyHistory[]
-}
-
 export const localCopyHistoryAtom = atomWithStorage(
   "copyHistory",
-  [] as CopyHistory[]
+  [] as CopyHistoryType[]
 )
 
 export default function CopyHistory({ type, tooltip, scrollThreshold }: Props) {
@@ -115,7 +105,7 @@ export default function CopyHistory({ type, tooltip, scrollThreshold }: Props) {
     historyItem,
     ...rest
   }: {
-    historyItem: CopyHistory
+    historyItem: CopyHistoryType
   }) => {
     return (
       <CopyButton value={historyItem.value} timeout={5000}>
@@ -176,8 +166,8 @@ export default function CopyHistory({ type, tooltip, scrollThreshold }: Props) {
     }
   }
 
-  const groupedData: { [key: string]: CopyHistory[] } = copyHistory.reduce(
-    (acc: { [key: string]: CopyHistory[] }, item) => {
+  const groupedData: { [key: string]: CopyHistoryType[] } = copyHistory.reduce(
+    (acc: { [key: string]: CopyHistoryType[] }, item) => {
       let itemTimestamp = item.timestamp
       if (itemTimestamp == undefined || itemTimestamp == null) {
         itemTimestamp = new Date(946800000000).getTime()
@@ -192,7 +182,7 @@ export default function CopyHistory({ type, tooltip, scrollThreshold }: Props) {
       }
       return groupedData
     },
-    {} as { [key: string]: CopyHistory[] }
+    {} as { [key: string]: CopyHistoryType[] }
   )
 
   const dateKeys = Object.keys(groupedData)
@@ -260,7 +250,7 @@ export default function CopyHistory({ type, tooltip, scrollThreshold }: Props) {
                 {groupedData[dates]
                   .sort()
                   .reverse()
-                  .map((historyItem: CopyHistory) => (
+                  .map((historyItem: CopyHistoryType) => (
                     <CopyHistoryItem
                       historyItem={historyItem}
                       key={historyItem.id}

components/types.ts

@@ -0,0 +1,19 @@
+export type AliasType = {
+  label: string
+  value: string
+}
+
+export type CopyHistoryType = {
+  id: number
+  type: string
+  value: string
+  timestamp?: number
+}
+
+export type TotalLocalStorage = [
+  { name: "selectedAlias"; value: string },
+  { name: "email"; value: string },
+  { name: "copyHistory"; value: CopyHistoryType[] },
+  { name: "aliases"; value: AliasType[] },
+  { name: "timestampEnabled"; value: boolean | "true" | "false" }
+]

package.json

@@ -24,7 +24,8 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "test": "cypress run",
+    "test": "playwright test",
+    "test-dev": "playwright test --ui",
     "vercel-build": "next build",
     "build:extension": "extensionReqs/build.sh"
   },
@@ -50,6 +51,7 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^8.1.0",
+    "@playwright/test": "^1.40.1",
     "@swc-jotai/react-refresh": "^0.0.8",
     "cypress": "^13.6.0"
   }