Merge pull request #10930 from codeKraken19/playwright-testing

Initialize Playwright testing

Makefile

@@ -388,6 +388,15 @@ graphql-docs-build:
 graphql-build: dep-check
 	cd server; cd internal/graphql; go run -mod=mod github.com/99designs/gqlgen generate
 
+
+
+## testing
+test-setup-ui:
+	cd meshmap; npm ci ; npx playwright install --with-deps; cd ..
+
+test-ui:
+	cd ui; npm run test:e2e; cd ..
+
 #-----------------------------------------------------------------------------
 # Dependencies
 #-----------------------------------------------------------------------------
@@ -407,4 +416,4 @@ ifeq (,$(findstring $(GOVERSION), $(INSTALLED_GO_VERSION)))
 #	$(error Found $(INSTALLED_GO_VERSION). \
 #	 Required golang version is: 'go$(GOVERSION).x'. \
 #	 Ensure go '$(GOVERSION).x' is installed and available in your 'PATH'.)
-endif
+endif

docs/_data/toc.yml

@@ -243,7 +243,7 @@
           url: project/contributing/build-and-release
           grandchildren:
           - title: "End-to-End Testing"
-            url: project/contributing/contributing-cypress
+            url: project/contributing/contributing-ui-tests
         - title: Adapters
           url: project/contributing/contributing-adapters
         - title: CLI ↆ

docs/pages/project/contributing/contributing-ui-tests.md

@@ -0,0 +1,48 @@
+---
+layout: page
+title: Contributing to Meshery's End-to-End Tests
+permalink: project/contributing/contributing-ui-tests
+abstract: How to contribute to End-to-End Tests using Playwright.
+language: en
+type: project
+category: contributing
+list: include
+---
+
+To automate functional integration and end-to-end testing Meshery uses [Playwright](https://playwright.dev) as one of the tools to automate browser testing. End-to-end tests run with each pull request to ensure that the changes do not break the existing functionality.
+
+## Executing Tests
+
+Clone the `meshery/meshery` repo. Tests are written in JavaScript. Navigate to the [/ui/tests/e2e/](https://github.com/meshery/meshery/tree/master/ui/tests/e2e) directory.
+
+Install the dependencies by running the following command:
+
+```bash
+
+npm install
+
+npm playwright install --with-deps
+
+```
+
+To run the tests, you can use the following commands:
+
+```bash
+
+// for running the whole test suite with all browsers
+npm run test:e2e
+
+// for running only on chromium
+npm run test:e2e:chromium
+
+// for only running fast tests
+npm run test:e2e:fast
+
+```
+
+<!-- ## Writing and Organizing Tests 
+
+
+### Best Practices
+
+-->

ui/.gitignore

@@ -6,4 +6,32 @@ coverage
 .nyc_output
 
 # Locally registered MeshModel packages
-public/static/img/meshmodels/
+public/static/img/meshmodels/
+
+#playwright test setup artifacts
+/playwright/.auth/*.json
+
+#playwright test results
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/tests/samples/seededDesigns.js
+
+
+#env vars
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.test.cloud
+.env.production.local
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

ui/README.md

@@ -1,3 +1,13 @@
+# <a name="contributing">Contributing Overview</a>
+
+Please do! Thank you for your help in improving Meshery! :balloon:
+
+---
+
+<details>
+
+  <summary><h3>Find the complete set of contributor guides at https://docs.meshery.io/project/contributing</h3></summary>
+
 # Contributor Guide for UI component
 
 This guide is specific to the Meshery UI component and involves steps/methods one need to follow while working on issues related to Meshery UI.
@@ -41,3 +51,34 @@ For reference and easy code search, the components are named accordingly followi
 involved in rendering the Results page of Meshery UI are named as 'MesheryResults.js', 'MesheryResultDialog.js', 'MesherySMIResults.js'. Please follow this convention if you are creating a new component.
 
 <p style="text-align: center"><em>If you'll like to go to the main Meshery Contributor guide <a href="../CONTRIBUTING.md">click here</a></em></p>
+
+## Testing
+
+- Meshery UI uses Playwright for end-to-end testing. The tests are written in JavaScript and are located in the `ui/tests` directory.
+
+- Install the dependencies by running the following command:
+
+```bash
+
+npm install
+
+npm playwright install --with-deps
+
+```
+
+- To run the tests, you can use the following command:
+
+```bash
+
+// for running the whole test suite with all browsers
+npm run test:e2e
+
+// for running only on chromium
+npm run test:e2e:chromium
+
+// for only running fast tests
+npm run test:e2e:fast
+
+```
+
+</details>