feat: add init playwright adapter js

Author: YOU54F

.eslintrc.json

@@ -9,11 +9,7 @@
     "es6": true,
     "jest": true
   },
-  "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:cypress/recommended"
-  ],
+  "extends": ["eslint:recommended", "plugin:react/recommended"],
   "globals": {
     "Atomics": "readonly",
     "SharedArrayBuffer": "readonly",
@@ -27,10 +23,6 @@
     "ecmaVersion": 2018,
     "sourceType": "module"
   },
-  "plugins": [
-    "react",
-    "cypress"
-  ],
-  "rules": {
-  }
-}
+  "plugins": ["react", "playwright"],
+  "rules": {}
+}

.github/workflows/build.yml

@@ -11,7 +11,7 @@ env:
   VERSION: ${{ github.sha }}
   GIT_REF: ${{ github.ref }}
   PACT_PROVIDER: pactflow-example-bi-directional-provider-postman
-  PACTICIPANT: pactflow-example-bi-directional-consumer-cypress
+  PACTICIPANT: pactflow-example-bi-directional-consumer-playwright
 
 jobs:
   test:

.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@v2
+    - uses: actions/setup-node@v2
+      with:
+        node-version: '14.x'
+    - 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@v2
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.github/workflows/test_pact_cli_tools_cross_os.yml

@@ -66,7 +66,7 @@ jobs:
     env:
       PACT_TOOL: ${{ matrix.pact_tool }}
       BRANCH: ${{ needs.setup.outputs.BRANCH }}
-      PACTICIPANT: "pactflow-example-bi-directional-consumer-cypress-${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.pact_tool }}"
+      PACTICIPANT: "pactflow-example-bi-directional-consumer-playwright-${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.pact_tool }}"
       PACT_PROVIDER: ${{ matrix.pact_provider }}
       PACT_CLI_VERSION: ${{ needs.setup.outputs.PACT_CLI_VERSION}}
       PACT_TOOL_USER_CHOICE: ${{ needs.setup.outputs.PACT_TOOL }}

.github/workflows/trigger_docs_update.yml

@@ -16,14 +16,14 @@ jobs:
           curl -X POST https://api.github.com/repos/pactflow/partners.pactflow.io/dispatches \
                 -H 'Accept: application/vnd.github.everest-preview+json' \
                 -H "Authorization: Bearer $GITHUB_TOKEN" \
-                -d '{"event_type": "pactflow-example-bi-directional-consumer-cypress-updated"}'
+                -d '{"event_type": "pactflow-example-bi-directional-consumer-playwright-updated"}'
         env:
           GITHUB_TOKEN: ${{ secrets.GHTOKENFORTRIGGERINGPACTDOCSUPDATE }}
       - name: Trigger docs.pactflow.io update workflow
         run: |
           curl -X POST https://api.github.com/repos/pactflow/docs.pactflow.io/dispatches \
                 -H 'Accept: application/vnd.github.everest-preview+json' \
                 -H "Authorization: Bearer $GITHUB_TOKEN" \
-                -d '{"event_type": "pactflow-example-bi-directional-consumer-cypress-updated"}'
+                -d '{"event_type": "pactflow-example-bi-directional-consumer-playwright-updated"}'
         env:
           GITHUB_TOKEN: ${{ secrets.GHTOKENFORTRIGGERINGPACTDOCSUPDATE }}

.gitignore

@@ -31,6 +31,7 @@ yarn-error.log*
 pacts/
 logs/
 
-# cypress
-videos/
-screenshots/
+# playwright
+/test-results/
+/playwright-report/
+/playwright/.cache/

Makefile

@@ -5,17 +5,25 @@
 # Default to the read only token - the read/write token will be present on Travis CI.
 # It's set as a secure environment variable in the .travis.yml file
 GITHUB_ORG="pactflow"
-PACTICIPANT ?= "pactflow-example-bi-directional-consumer-cypress"
+PACTICIPANT ?= "pactflow-example-bi-directional-consumer-playwright"
 GITHUB_WEBHOOK_UUID := "04510dc1-7f0a-4ed2-997d-114bfa86f8ad"
 PACT_CHANGED_WEBHOOK_UUID := "8e49caaa-0498-4cc1-9368-325de0812c8a"
 VERSION?=$(shell npx -y absolute-version)
 BRANCH?=$(shell git rev-parse --abbrev-ref HEAD)
 
+
+# Only deploy from main/master
+ifneq ($(filter $(BRANCH),main master),)
+	DEPLOY_TARGET=deploy
+else
+	DEPLOY_TARGET=no_deploy
+endif
+
 ## ====================
 ## Demo Specific Example Variables
 ## ====================
 REACT_APP_API_BASE_URL=http://localhost:3001
-PACT_FILES_LOCATION=cypress/pacts
+PACT_FILES_LOCATION=pacts
 
 ## ====================
 ## CI tasks
@@ -29,7 +37,7 @@ all_ruby_cli: ci_ruby_cli
 # Run the ci target from a developer machine with the environment variables
 # set as if it was on Github Actions.
 # Use this for quick feedback when playing around with your workflows.
-ci: test test_and_publish can_i_deploy $(DEPLOY_TARGET)
+ci: test_and_publish can_i_deploy $(DEPLOY_TARGET)
 
 # Run the ci target from a developer machine with the environment variables
 # set as if it was on CI.
@@ -41,7 +49,7 @@ fake_ci: .env
 test_and_publish: test publish_pacts
 
 publish_pacts: .env
-	@echo "\n========== STAGE: publish_pacts generated with cypress ==========\n"
+	@echo "\n========== STAGE: publish_pacts generated with playwright ==========\n"
 	@${PACT_BROKER_COMMAND} publish ${PACT_FILES_LOCATION} --consumer-app-version ${VERSION} --branch ${BRANCH}
 
 ## =====================
@@ -51,26 +59,20 @@ publish_pacts: .env
 install: npm install 
 
 test: .env
-	@echo "\n========== STAGE: test ✅ (cypress) ==========\n"
+	@echo "\n========== STAGE: test ✅ (playwright) ==========\n"
 	npm run start:ui:and:test
 
 ## =====================
 ## Deploy tasks
 ## =====================
 
-# Only deploy from main/master
-ifneq ($(filter $(BRANCH),main master),)
-	DEPLOY_TARGET=deploy
-else
-	DEPLOY_TARGET=no_deploy
-endif
 
 create_environment:
 	@"${PACT_BROKER_COMMAND}" create-environment --name production --production
 
 deploy: deploy_app record_deployment
 
-deploy_target: can_i_deploy $(DEPLOY_TARGET)
+deploy_target: $(DEPLOY_TARGET)
 
 no_deploy:
 	@echo "Not deploying as not on main branch"
@@ -204,4 +206,6 @@ install-pact-ruby-standalone:
 		./pact/bin/pact-mock-service --help && \
 		./pact/bin/pact-provider-verifier --help && \
 		./pact/bin/pactflow help;; \
-	esac
+	esac
+
+.PHONY: test

README.md

@@ -1,12 +1,12 @@
-# Example NodeJS/React Consumer - Cypress (BYO Adapter)
+# Example NodeJS/React Consumer - playwright (BYO Adapter)
 
-[![Build](https://github.com/pactflow/example-bi-directional-consumer-cypress/actions/workflows/build.yml/badge.svg)](https://github.com/pactflow/example-bi-directional-consumer-cypress/actions/workflows/build.yml)
+[![Build](https://github.com/pactflow/example-bi-directional-consumer-playwright/actions/workflows/build.yml/badge.svg)](https://github.com/pactflow/example-bi-directional-consumer-playwright/actions/workflows/build.yml)
 
-[![Can I deploy Status](https://testdemo.pactflow.io/pacticipants/pactflow-example-bi-directional-consumer-cypress/branches/main/latest-version/can-i-deploy/to-environment/production/badge)](https://testdemo.pactflow.io/pacticipants/pactflow-example-bi-directional-consumer-cypress/branches/main/latest-version/can-i-deploy/to-environment/production/badge)
+[![Can I deploy Status](https://testdemo.pactflow.io/pacticipants/pactflow-example-bi-directional-consumer-playwright/branches/main/latest-version/can-i-deploy/to-environment/production/badge)](https://testdemo.pactflow.io/pacticipants/pactflow-example-bi-directional-consumer-playwright/branches/main/latest-version/can-i-deploy/to-environment/production/badge)
 
-- [Example NodeJS/React Consumer - Cypress (BYO Adapter)](#example-nodejsreact-consumer---cypress-byo-adapter)
+- [Example NodeJS/React Consumer - playwright (BYO Adapter)](#example-nodejsreact-consumer---playwright-byo-adapter)
   - [Overview of Example](#overview-of-example)
-    - [Key points with Cypress](#key-points-with-cypress)
+    - [Key points with playwright](#key-points-with-playwright)
   - [Overview of Part of Bi-Directional Contract Testing Flow](#overview-of-part-of-bi-directional-contract-testing-flow)
   - [Compatibile with Providers](#compatibile-with-providers)
   - [Pre-requisites](#pre-requisites)
@@ -23,21 +23,21 @@
 
 <!-- Consumer Overview -->
 
-This is an example of a React "Product" API consumer that uses Cypress, [pact-cypress-adapter](https://www.npmjs.com/package/@pactflow/pact-cypress-adapter), [Pactflow](https://pactflow.io) and GitHub Actions to generate and publish Pact consumer contracts.
+This is an example of a React "Product" API consumer that uses playwright, [pact-playwright-adapter](https://www.npmjs.com/package/@pactflow/pact-playwright-adapter), [Pactflow](https://pactflow.io) and GitHub Actions to generate and publish Pact consumer contracts.
 
 It performs pre-deployment cross-compatibility checks to ensure that it is compatible with specified providers using the Bi-Directional contract capability of Pactflow.
 
 <!-- General -->
 
 See the full [Pactflow Bi-Directional Workshop](https://docs.pactflow.io/docs/workshops/bi-directional-contract-testing) for which this can be substituted in as the "consumer".
 
-### Key points with Cypress
+### Key points with playwright
 
 It:
 
 - It a React app implementing a "Product" website created with Create React App
-- It utilises Cypress to functionally test the website
-- It utilises [pact-cypress-adapter](https://www.npmjs.com/package/@pactflow/pact-cypress-adapter) to transform cypress mocks into Pact consumer contracts.
+- It utilises playwright to functionally test the website
+- It utilises [pact-playwright-adapter](https://www.npmjs.com/package/@pactflow/pact-playwright-adapter) to transform playwright mocks into Pact consumer contracts.
 
 ## Overview of Part of Bi-Directional Contract Testing Flow
 
@@ -102,7 +102,7 @@ Set `PACT_PROVIDER` to one of the following
 
 ### Steps
 
-NOTE: Cypress tests are located in `./cypress/integration`. See below for how to start cypress test, generate consumer contract and publish contract to pactflow.
+NOTE: playwright tests are located in `./playwright/integration`. See below for how to start playwright test, generate consumer contract and publish contract to pactflow.
 
 - `make install` - install project dependencies
 
@@ -133,13 +133,13 @@ Using alternate pact CLI tools.
 - `PACT_TOOL=ruby_standalone make ci` - run the CI process, using the pact standalone CLI tool
 - `PACT_TOOL=ruby_cli make ci` - run the CI process, using the pact ruby CLI tool
 
-_How to use Cypress_
+\_How to use Playwright
 
 - Spin up the ui project by running `npm run start`
-- Define your pact provider and consumer name at `cypress.json` as cypress environment variables
+- Define your pact provider and consumer name at `playwright.json` as playwright environment variables
 - You can stub your network request and response with `cy.intercept`, and record network call to a consumer driven contract with `cy.usePactWait`. Each request you want to add to the contract must call this method.
-- `npm run cypress:headless:chrome` - this will run cypress e2e test in headless mode, and write stubbed network calls a pact file
-- `npm run cypress:run` - this will run cypress e2e test with browser ui
+- `npm run playwright:headless:chrome` - this will run playwright e2e test in headless mode, and write stubbed network calls a pact file
+- `npm run playwright:run` - this will run playwright e2e test with browser ui
 
 ## OS/Platform specific considerations