test playwright integration

.github/workflows/ci.yml

@@ -7,9 +7,16 @@ jobs:
     if: github.event.deployment_status.state == 'success'
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout 🛎
+      - uses: actions/checkout@v2
-        uses: actions/checkout@v1
+      - uses: actions/setup-node@v2
-      - name: Run Cypress 🌲
+        with:
-        uses: cypress-io/github-action@v2
+          node-version: '14.x'
+      - name: Install dependencies
+        run: npm ci
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: npm run test:e2e
         env:
-          CYPRESS_BASE_URL: ${{ github.event.deployment_status.target_url }}
+          # This might depend on your test-runner/language binding
+          PLAYWRIGHT_TEST_BASE_URL: ${{ github.event.deployment_status.target_url }}

cypress/fixtures/example.json

@@ -1,5 +0,0 @@
-{
-  "name": "Using fixtures to represent data",
-  "email": "hello@cypress.io",
-  "body": "Fixtures are a great way to mock data for responses to routes"
-}

cypress/integration/basic.spec.js

@@ -1,49 +0,0 @@
-/* 
-This is a basic test to show you how cypress works (and how easy it is to build tests!)
-It will launch the homepage and navigate through 2 differents pages (Pricing and Contact). 
-You can see that it will do this twice, with 2 different resolution, to test the mobile version of the site.
-*/
-
-describe('Basic Test', () => {
-	context('Desktop resolution', () => {
-		it('Visits the homepage and nav links (Desktop)', () => {
-			cy.viewport(1280, 720);
-			cy.visit('');
-
-			cy.get('nav').contains('Pricing').click();
-			cy.url().should('include', '/pricing');
-
-			cy.get('nav').contains('Contact').click();
-			cy.url().should('include', '/contact');
-
-			cy.get('nav').contains('Login').click();
-			cy.url().should('include', '/login');
-
-			cy.get('nav').contains('Sign Up').click();
-			cy.url().should('include', '/signup');
-		});
-	});
-
-	context('Mobile resolution', () => {
-		it('Visits the homepage and nav links (Mobile)', () => {
-			cy.viewport(680, 720);
-			cy.visit('');
-
-			cy.get('[data-cy=dropdown]').click();
-			cy.get('[data-cy=dropdown]').contains('Pricing').click();
-			cy.url().should('include', '/pricing');
-
-			cy.get('[data-cy=dropdown]').click();
-			cy.get('[data-cy=dropdown]').contains('Login').click();
-			cy.url().should('include', '/login');
-
-			cy.get('[data-cy=dropdown]').click();
-			cy.get('[data-cy=dropdown]').contains('Sign Up').click();
-			cy.url().should('include', '/signup');
-
-			cy.get('[data-cy=dropdown]').click();
-			cy.get('[data-cy=dropdown]').contains('Contact').click();
-			cy.url().should('include', '/contact');
-		});
-	});
-});

cypress/plugins/index.js

@@ -1,22 +0,0 @@
-/// <reference types="cypress" />
-// ***********************************************************
-// This example plugins/index.js can be used to load plugins
-//
-// You can change the location of this file or turn off loading
-// the plugins file with the 'pluginsFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/plugins-guide
-// ***********************************************************
-
-// This function is called when a project is opened or re-opened (e.g. due to
-// the project's config changing)
-
-/**
- * @type {Cypress.PluginConfig}
- */
-// eslint-disable-next-line no-unused-vars
-module.exports = (on, config) => {
-	// `on` is used to hook into various events Cypress emits
-	// `config` is the resolved Cypress config
-};

cypress/support/commands.js

@@ -1,25 +0,0 @@
-// ***********************************************
-// This example commands.js shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

cypress/support/index.js

@@ -1,20 +0,0 @@
-// ***********************************************************
-// This example support/index.js is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-import './commands';
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')

package.json

@@ -8,7 +8,8 @@
     "start": "next start",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
-    "eslint": "eslint . --fix"
+    "eslint": "eslint . --fix",
+    "test": "playwright test"
   },
   "dependencies": {
     "@headlessui/react": "^1.4.1",
@@ -35,12 +36,12 @@
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^11.1.2",
+    "@playwright/test": "^1.16.0",
     "@types/cors": "^2.8.12",
     "@types/express-rate-limit": "^5.1.3",
     "@types/micro": "^7.3.6",
     "@typescript-eslint/eslint-plugin": "^4.32.0",
     "autoprefixer": "^10.3.6",
-    "cypress": "^8.5.0",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-next": "^11.1.2",

tests/basic.spec.ts

@@ -0,0 +1,7 @@
+import { expect, test } from '@playwright/test';
+
+test('basic test', async ({ page }) => {
+	await page.goto('https://playwright.dev/');
+	const title = page.locator('.navbar__inner .navbar__title');
+	await expect(title).toHaveText('Playwright');
+});

tests/playwright.config.ts

@@ -0,0 +1,41 @@
+// playwright.config.ts
+
+import { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+	projects: [
+		{
+			name: 'Chrome Stable',
+			use: {
+				baseURL: process.env.NEXT_PUBLIC_VERCEL_URL
+					? process.env.NEXT_PUBLIC_VERCEL_URL
+					: 'http://localhost:3000',
+				browserName: 'chromium',
+				// Test against Chrome Stable channel.
+				channel: 'chrome',
+			},
+		},
+		{
+			name: 'Desktop Safari',
+			use: {
+				baseURL: process.env.NEXT_PUBLIC_VERCEL_URL
+					? process.env.NEXT_PUBLIC_VERCEL_URL
+					: 'http://localhost:3000',
+				browserName: 'webkit',
+				viewport: { width: 1200, height: 750 },
+			},
+		},
+		// Test against mobile viewports.
+		{
+			name: 'Desktop Firefox',
+			use: {
+				baseURL: process.env.NEXT_PUBLIC_VERCEL_URL
+					? process.env.NEXT_PUBLIC_VERCEL_URL
+					: 'http://localhost:3000',
+				browserName: 'firefox',
+				viewport: { width: 800, height: 600 },
+			},
+		},
+	],
+};
+export default config;