Move playwright to own directory and delete cypress

.eslintrc.js

@@ -118,14 +118,6 @@ module.exports = {
       },
     },
 
-    // Cypress
-    {
-      files: ["cypress/**/*.ts"],
-      plugins: ["cypress"],
-      extends: ["plugin:cypress/recommended", "prettier"],
-      rules: { "@typescript-eslint/no-namespace": "off" },
-    },
-
     // Node
     {
       files: [".eslintrc.js", "mocks/**/*.js"],

.github/workflows/deploy.yml

@@ -122,17 +122,19 @@ jobs:
         run: npx prisma migrate reset --force
 
       - name: create admin user
-        run: echo "ADMIN_COOKIE=$(npx ts-node --require tsconfig-paths/register ./cypress/support/create-user.ts 'test@example.com' ADMIN)" >> $GITHUB_ENV
+        run: echo "ADMIN_COOKIE=$(npx ts-node --require tsconfig-paths/register ./tasks/create-user.ts 'test@example.com' ADMIN)" >> $GITHUB_ENV
 
       - name: Install Playwright
-        run: npx playwright install --with-deps
+        run: npm ci && npx playwright install --with-deps
+        working-directory: ./playwright
       - name: Run Playwright tests
         run: npx playwright test
+        working-directory: ./playwright
       - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-report
-          path: playwright-report/
+          path: playwright/playwright-report/
           retention-days: 30
 
   sonarqube:
@@ -262,7 +264,7 @@ jobs:
             pm2 save
 
             # echo "*** Step: ** Run Playwright tests"
-            # echo "ADMIN_COOKIE=$(npx ts-node --require tsconfig-paths/register ./cypress/support/create-user.ts 'test@example.com' ADMIN)" >> .env
+            # echo "ADMIN_COOKIE=$(npx ts-node --require tsconfig-paths/register ./tasks/create-user.ts 'test@example.com' ADMIN)" >> .env
             # npx playwright install --with-deps
             # npx playwright test
 

.gitignore

@@ -5,8 +5,6 @@ coverage
 /public/build
 .env
 Credentials.json
-/cypress/screenshots
-/cypress/videos
 /prisma/data.db
 /prisma/data.db-journal
 
@@ -15,16 +13,8 @@ Credentials.json
 **/.DS_Store
 
 # Playwright
-/test-results/
-/playwright-report/
-/blob-report/
-/playwright/.cache/
-/test-results/
-/playwright-report/
-/blob-report/
+/playwright/test-results/
+/playwirght/playwright-report/
+/playwright/blob-report/
 /playwright/.cache/
 /playwright/.auth
-/test-results/
-/playwright-report/
-/blob-report/
-/playwright/.cache/

README.md

@@ -9,7 +9,7 @@ Based on the [The Remix Indie Stack](https://remix.run/stacks).
 - [GitHub Actions](https://github.com/features/actions) for deploy on merge to production and staging environments
 - Auth0 Authentication with [cookie-based sessions](https://remix.run/docs/en/v1/api/remix#createcookiesessionstorage)
 - Database ORM with [Prisma](https://prisma.io)
-- End-to-end testing with [Cypress](https://cypress.io)
+- End-to-end testing with [Playwright](https://playwright.dev)
 - Local third party request mocking with [MSW](https://mswjs.io)
 - Unit testing with [Vitest](https://vitest.dev) and [Testing Library](https://testing-library.com)
 - Code formatting with [Prettier](https://prettier.io)
@@ -235,30 +235,31 @@ We use GitHub Actions for continuous integration and deployment. Anything that g
 
 ## Testing
 
-### Cypress
+### Playwright
 
-We use Cypress for our End-to-End tests in this project. You'll find those in the `cypress` directory. As you make changes, add to an existing file or create a new file in the `cypress/e2e` directory to test your changes.
+We use Playwright for our End-to-End tests in this project. You'll find those in the `playwright` directory. As you make changes, add to an existing file or create a new file in the `playwright/tests` directory to test your changes.
 
-We use [`@testing-library/cypress`](https://testing-library.com/cypress) for selecting elements on the page semantically.
+Inside the playwright directory, you can run several commands:
 
-To run these tests in development, run `npm run test:e2e:dev` which will start the dev server for the app as well as the Cypress client. Make sure the database is running in docker as described above.
+```sh
+npx playwright test
+# Runs the end-to-end tests.
 
-We have a utility for testing authenticated features without having to go through the login flow:
+npx playwright test --ui
+# Starts the interactive UI mode.
 
-```ts
-cy.login();
-// you are now logged in as a new user
-```
+npx playwright test --project=chromium
+# Runs the tests only on Desktop Chrome.
 
-We also have a utility to auto-delete the user at the end of your test. Just make sure to add this in each test file:
+npx playwright test example
+# Runs the tests in a specific file.
 
-```ts
-afterEach(() => {
-  cy.cleanupUser();
-});
-```
+npx playwright test --debug
+# Runs the tests in debug mode.
 
-That way, we can keep your local db clean and keep your tests isolated from one another.
+npx playwright codegen
+# Auto generate tests with Codegen.
+```
 
 ### Vitest
 

app/routes/projects.$projectId.edit.tsx

@@ -118,16 +118,12 @@ export default function EditProjectPage() {
     useTypedLoaderData<typeof loader>();
 
   const [open, setOpen] = useState(false);
-  const [isButtonDisabled, setisButtonDisabled] = useState(true);
 
   const handleClickOpen = () => {
     setOpen(true);
-
-    setTimeout(() => setisButtonDisabled(false), 5000);
   };
 
   const handleClose = () => {
-    setisButtonDisabled(true);
     setOpen(false);
   };
 
@@ -194,12 +190,7 @@ export default function EditProjectPage() {
             <Button variant="contained" onClick={handleClose}>
               Cancel
             </Button>
-            <Button
-              variant="contained"
-              disabled={isButtonDisabled}
-              color="warning"
-              type="submit"
-            >
+            <Button variant="contained" color="warning" type="submit">
               Yes, delete it
             </Button>
           </DialogActions>