Docs: E2E tests instructions (#92)

Co-authored-by: Baruch Odem <baruch.odem@checkmarx.com>
Co-authored-by: Baruch Odem <baruchiro@gmail.com>

Author: 3 people

README.md

@@ -108,6 +108,12 @@ To start developing the extension locally, follow these steps:
 
 You can now test and debug the extension on _Chrome_ or _Firefox_.
 
+#### Testing
+
+To run unit tests, use `yarn test`. We use [Jest](https://jestjs.io/) for testing.
+
+For end-to-end tests, see the [e2e/README.md](e2e/README.md) file.
+
 ### Resources
 
 - A YouTube video for the [Ma'akaf community](https://discord.gg/fyZ8A5nb) about [how to start to contribute to this project](https://youtu.be/OnxaCXPAWAs) (in Hebrew).
@@ -120,6 +126,7 @@ You can now test and debug the extension on _Chrome_ or _Firefox_.
 - https://www.linkedin.com/in/bar-lanyado-bb50b3110/
 - https://www.linkedin.com/in/bogdan-kortnov-58996b213/
 - https://www.linkedin.com/in/uriklar/
+- https://www.linkedin.com/in/elad-tal-0355531b7/
 - You?
 
 ## License

e2e/README.md

@@ -0,0 +1,21 @@
+# End-to-End Testing with Playwright
+
+## Creating a test
+
+1. Go to the right e2e file and add a test with specific name.
+2. create the test with minimal overhead (fewer locators, fewer API calls, etc).
+
+## Run and Debug a test
+
+1. download the [Playwright Test for VSCode](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright) extension.
+2. You will see a small green play button near the test you created or want to run.
+3. If the test failed you need to debug it.
+4. Go to the fixtures file and remove the `--headless=new` from args (this will run the test on a browser on your computer), you can also uncomment the `slowMo` for seeing each step.
+5. Run in your terminal `yarn e2e:debug`. It will open a Playwright modal with a browser so you can see and debug each step.
+6. Fix the problems and run also in headless mode (undo step 4)
+
+## Problems?
+
+Ask around, and check the [Playwright docs](https://playwright.dev/docs/intro).
+Found an issue? Did we miss a case?
+You're welcome to open an issue or talk with us on [Discord](https://discord.gg/H2SMbzh5).

tests/README.md

@@ -5,28 +5,3 @@ These tests are _Integration Tests_ that are used to check our code against real
 To avoid _Too Many Requests_ block, we are saving the webpages snapshot by running the `yarn update-webpages-snapshot` command manually.
 
 Then, we are running our code against the local snapshots.
-
-# Manual Test Script
-
-## What we testing
-
-- The extension is able to detect the packages in the page
-- The page contacting with the background script
-- The background script is able to fetch the advisories from the API
-- The popup is working correctly
-- Changes in the popup affect the indicator immediately
-
-## Prerequisites
-
-- Install the extension on _Chrome_ and _Firefox_ browsers
-- Have a test page ready (e.g. https://stackoverflow.com/questions/33527653)
-
-## Steps
-
-1. Open the test page on both browsers
-2. Verify that the indicator appears on the packages in the page and shows the number of issues
-3. Click on the extension logo to open his popup
-4. Verify that the popup shows the details of the advisories and has a toggle button to enable or disable them
-5. Click on the toggle button to disable the advisories
-6. Verify that the indicator updates and shows zero issues
-7. Refresh the page and verify that the indicator is still zero