Playwright test #51

Philip-21 · 2023-09-10T21:33:41Z

Notes for Reviewers

This PR fixes #

Yes, I signed my commits.

Signed-off-by: Philip-21 <philipuzomaobiora@gmail.com>

VaibhavMalik4187 · 2023-09-11T06:52:43Z

playwright-action/.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests


This is already present in master: https://github.com/layer5labs/meshmap-snapshot/blob/master/.github/workflows/playwright.yml

yh i observed that after i pushed, my master branch wasnt up to-date

VaibhavMalik4187 · 2023-09-11T06:58:18Z

Awesome work @Philip-21. Please rebase your branch on master so that you don't re-add the files already present in master.

VaibhavMalik4187 · 2023-09-11T07:02:37Z

On a side note, adding a slightly more descriptive commit message and description is always helpful for fellow developers :)
https://cbea.ms/git-commit/

Philip-21 · 2023-09-11T07:35:25Z

On a side note, adding a slightly more descriptive commit message and description is always helpful for fellow developers :) https://cbea.ms/git-commit/

Sure, the next commit will have it.

Signed-off-by: Philip-21 <philipuzomaobiora@gmail.com>

Philip-21 · 2023-09-11T09:21:21Z

@VaibhavMalik4187 i created new functions in the playwrightSetup file to be called in the playwright test file
There are several commands implemented in cypres which cant be done in playwright.
looking at this file
I can implement login, Setting Viewport, making api request and intercepting requests to be used for testcases.

VaibhavMalik4187 · 2023-09-11T10:16:36Z

@VaibhavMalik4187 i created new functions in the playwrightSetup file to be called in the playwright test file There are several commands implemented in cypres which cant be done in playwright. looking at this file I can implement login, Setting Viewport, making api request and intercepting requests to be used for testcases.

@Philip-21 you're making great progress. If you could just implement the helper functions used in beforeEachCallbackForCustomUrl, then I'll quickly raise a PR to replace cypress with playwright in meshmap-snapshot action to run the loadDesign e2e test.

Ultimately, this request includes the implementation playwright version of the following cypress functions:

intercept
setViewPort
login

I'll need to spend some more time with playwright before I become able to convert the following functions.

setReleaseTag
interceptCapabilities
setMode

Feel free to ping me in case you need help with anything.

Aritra8438

@leecalcote, tried to address some overall Maybe problems related to JavaScript, not MeshMap or Playwright.

I'm not sure about the working of meshmap. So, sorry @Philip-21 if I'm wrong :3

Aritra8438 · 2023-09-11T12:22:22Z

playwright-action/helpers/constants.js

+  path: "/api/pattern*",
+  alias: "designEp",
+  wait: "@designEp",
+  absolutePath: "/api/pattern"


Is api/pattern an endpoint?
What's the use of designEndpoint?

@Philip-21, may you answer this?

its the ApiEndpoint for creating or deleting meshmap design .

I see. Id added after it will point to a particular design, r8?

i am thinking of writing individual tests for every action but i dont think it will work

i am trying to see how i ca put everything together, for it to work

Aritra8438 · 2023-09-11T12:26:04Z

playwright-action/helpers/playwrightSetup.js.js

+      // Capture a screenshot and save it with a custom filename
+      const date = new Date();
+      // Format: MeshMap-Fri Sep 09 2023-10:30:45 AM.png
+      const fileName = `MeshMap-${date.toDateString()}-${date.toLocaleTimeString()}.png`;


toDateString() will give a string with some spaces in it, r8?
The same goes for toLocaleTimeString.

Can we format it to YYYYMMDDHHMMSS or related formats which is less ambiguous? Is it possible?

There should be a way. My js isnt that solid but i'll fix it

Philip-21 · 2023-09-11T21:12:43Z

@VaibhavMalik4187 i created new functions in the playwrightSetup file to be called in the playwright test file There are several commands implemented in cypres which cant be done in playwright. looking at this file I can implement login, Setting Viewport, making api request and intercepting requests to be used for testcases.

@Philip-21 you're making great progress. If you could just implement the helper functions used in beforeEachCallbackForCustomUrl, then I'll quickly raise a PR to replace cypress with playwright in meshmap-snapshot action to run the loadDesign e2e test.

Ultimately, this request includes the implementation playwright version of the following cypress functions:

intercept

setViewPort

login

I'll need to spend some more time with playwright before I become able to convert the following functions.

setReleaseTag

interceptCapabilities

setMode

Feel free to ping me in case you need help with anything.

Alright @VaibhavMalik4187 thanks , i'll be intouch

Signed-off-by: Philip-21 <philipuzomaobiora@gmail.com>

Philip-21 · 2023-09-12T22:59:12Z

@VaibhavMalik4187 i just implemented some new functions to be used for beforeEachCallbackForCustomUrl

VaibhavMalik4187 · 2023-09-13T02:29:44Z

playwright-action/helpers/playwrightUtils.js

+
+//utility func to generate css selector and return id and strings
+function waitFor(str) {
+      return `@${str}`;


I wonder if using $ to access the element is recommended.

its the same method as return "@" + str;

${} makes it easier to include variables and expressions within a string without explicit concatenation.

what do you think of the login and interceptRequests functions

Signed-off-by: Philip-21 <philipuzomaobiora@gmail.com>

Philip-21 · 2023-09-17T18:30:25Z

I have been able to write and run some individual tests in the playWrightUtils.js
these are just tests in accessing the meshery page and they ran successfully .

The main thing is to configure meshmap snapshots to run successfully,
I am figuring out how i will configure and put things together to make it a success

I looked through the cypress-action files to see how that was achieved, I observed cypress has alot of inbuilt functionalities which playwright doesn't.

So, I imitated some cypress commands in the commands.js and helpers.js and I defined some of these comands in the playwrightsetup.JS

The constant.js which is similar to the cypress action folder , is for getting the meshmap designs and its api endpoints.

these are just the progress i have made so far

The approach used to run the cypress action, I feel it was a different approach as spec.js file wasn't used to run it.
The function in the loadDesign.js runs the e2e tests as we can see in the action workflow. These are just my observations so far

I defined some setup functions that would used to run the e2e test as the way it was implemented for the cypress-action.

But I feel using the spec.js will be better for running e2e tests for playwright, as i was able to run individual tests successfully in the spec file . I am also figuring out how to call and perform the meshMap snapshot actions with configurations in the playwrightsetup.js and the design endpoint in the
constant.js which will be called and ran in the spec file

MarioArriaga92 · 2023-09-23T00:09:09Z

playwright-action/helpers/playwrightUtils.js

+      const signInButton = await page.waitForSelector('button[type="submit"]');
+      await signInButton.click(); 
+      // Wait for some time (e.g., 5 seconds) for any post-login actions or page navigation to complete
+      await page.waitForTimeout(5000);


@Philip-21 "Never wait for timeout in production. Tests that wait for time are inherently flaky. Use Locator actions and web assertions that wait automatically."

For reference, see https://playwright.dev/docs/api/class-page#page-wait-for-timeout

A solid observation. 🙌

MarioArriaga92 · 2023-09-23T00:21:58Z

playwright-action/helpers/playwrightUtils.js

+
+export async function MeshMap(page){
+      await page.goto('https://playground.meshery.io/extension/meshmap');
+      const meshMapBetaHeading = page.locator('h1:has-text(/MeshMap\s*beta/i)');


isn't page.locator('h1:has-text(/MeshMap\s*beta/i)'); missing an await in the beginning?

MarioArriaga92 · 2023-09-23T00:23:32Z

playwright-action/helpers/playwrightUtils.js

+     // Use page.locator() to describe the headings under "MeshMap beta."
+      const designsHeading = page.locator('h1:has-text(/MeshMap\\s*beta/i) + h2:has-text("Designs")');
+      const componentsHeading = page.locator('h1:has-text(/MeshMap\\s*beta/i) + h2:has-text("Components")');
+      const applicationsHeading = page.locator('h1:has-text(/MeshMap\\s*beta/i) + h2:has-text("Applications")');


several of these other locator methods are also missing an await in the beginning

Oh, if those await aren't implicit, then this certainly seems like a best practice to institute.

Signed-off-by: Philip-21 <philipuzomaobiora@gmail.com>

Philip-21 · 2023-09-23T01:57:54Z

@MarioArriaga92 thanks i've fixed them

Signed-off-by: Philip-21 <philipuzomaobiora@gmail.com>

hamza-mohd · 2023-09-27T11:38:44Z

This is some inspiring work, @Philip-21 😄

Philip-21 · 2023-09-28T16:25:37Z

This is some inspiring work, @Philip-21 😄

lol thanks

MarioArriaga92 · 2023-09-28T16:56:57Z

@Philip-21 any idea why all the PR Check failures?

MarioArriaga92 · 2023-09-28T17:00:53Z

@Philip-21 also, about the "tests_e2e" job, 2 questions/observations:

Is there a way to make "Run Playwright tests" step a bit more verbose so titles of passing tests are shown?
seems like upload-artifact action/step isn't finding any files to upload.

See screenshot for reference:

Signed-off-by: Philip-21 <philipuzomaobiora@gmail.com>

hamza-mohd · 2023-09-29T21:36:19Z

This is quite interesting, @Philip-21. Cool.

Signed-off-by: Philip-21 <philipuzomaobiora@gmail.com>

Abhishek-kumar09 · 2023-10-14T13:22:59Z

Hello @Philip-21 The workflow is pull_request_target, it only runs on master branch, so its obvious to fail here. Your local changes are running good?

You can merge your branch into your local fork and see the running tests/debug from there.

Signed-off-by: Philip-21 <philipuzomaobiora@gmail.com>

…p-snapshot into playwright-test

leecalcote · 2023-10-18T17:26:06Z

Does it work?

Philip-21 · 2023-10-20T22:28:31Z

All Playwright tests work perfectly, but the workflow is still detecting failed cypress actions. I am liaising with Abhi on this issue

…

On Wed, Oct 18, 2023 at 6:26 PM Lee Calcote ***@***.***> wrote: Does it work? — Reply to this email directly, view it on GitHub <#51 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ARP2QJWIUJRXCGB7GCFDABLYAAGLTAVCNFSM6AAAAAA4SNZOSGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTONRZGAYDSMJZGE> . You are receiving this because you modified the open/close state.Message ID: ***@***.***>

first commits

f8f8a05

Signed-off-by: Philip-21 <philipuzomaobiora@gmail.com>

leecalcote requested review from VaibhavMalik4187 and Aritra8438 September 11, 2023 01:50

VaibhavMalik4187 reviewed Sep 11, 2023

View reviewed changes

Philip-21 added 3 commits September 11, 2023 09:06

removing files

3c2d7ef

Signed-off-by: Philip-21 <philipuzomaobiora@gmail.com>

Merge branch 'master' into playwright-test

a53f549

setup functions to be used for playwright tests

42c1693

Signed-off-by: Philip-21 <philipuzomaobiora@gmail.com>

Aritra8438 reviewed Sep 11, 2023

View reviewed changes

new setup functions and util functions

3b297a7

Signed-off-by: Philip-21 <philipuzomaobiora@gmail.com>

VaibhavMalik4187 reviewed Sep 13, 2023

View reviewed changes

Philip-21 added 7 commits September 14, 2023 13:47

creating Api requests

7bdbb5e

Signed-off-by: Philip-21 <philipuzomaobiora@gmail.com>

refactoring fand adjusting helper functions

d718774

Signed-off-by: Philip-21 <philipuzomaobiora@gmail.com>

new login test passed

39b760b

Signed-off-by: Philip-21 <philipuzomaobiora@gmail.com>

adding more tests

abb1b1a

Signed-off-by: Philip-21 <philipuzomaobiora@gmail.com>

redefining and adding setup functions

bf86152

Signed-off-by: Philip-21 <philipuzomaobiora@gmail.com>

adding more setup functions

5e5666c

Signed-off-by: Philip-21 <philipuzomaobiora@gmail.com>

utility tests

2d8c9b6

Signed-off-by: Philip-21 <philipuzomaobiora@gmail.com>

MarioArriaga92 reviewed Sep 23, 2023

View reviewed changes

reoving timeouts,declaring await where necessary

39d8f24

Signed-off-by: Philip-21 <philipuzomaobiora@gmail.com>

switchng to typescript

fd13965

Signed-off-by: Philip-21 <philipuzomaobiora@gmail.com>

theBeginner86 requested a review from MarioArriaga92 September 28, 2023 16:25

Philip-21 added 5 commits September 29, 2023 07:39

setting up playwright to capture snapshots

dda9e6b

Signed-off-by: Philip-21 <philipuzomaobiora@gmail.com>

reasjusting and removing test files

0c13af5

Signed-off-by: Philip-21 <philipuzomaobiora@gmail.com>

adjusting actions

9d37825

Signed-off-by: Philip-21 <philipuzomaobiora@gmail.com>

taking of if statement

3774444

Signed-off-by: Philip-21 <philipuzomaobiora@gmail.com>

commenting out cypress actions

f94fb5d

Signed-off-by: Philip-21 <philipuzomaobiora@gmail.com>

Philip-21 added 6 commits September 30, 2023 15:42

working on playwright workflow

005c6d2

Signed-off-by: Philip-21 <philipuzomaobiora@gmail.com>

creating new adir to upload artifacts

81cb704

Signed-off-by: Philip-21 <philipuzomaobiora@gmail.com>

deining env var for appid

4f31aea

Signed-off-by: Philip-21 <philipuzomaobiora@gmail.com>

rewriting meshmapsnapshot test function

f1e584c

Signed-off-by: Philip-21 <philipuzomaobiora@gmail.com>

indicating playwright workflow properly

8245171

Signed-off-by: Philip-21 <philipuzomaobiora@gmail.com>

removing branch refs

edac40f

Signed-off-by: Philip-21 <philipuzomaobiora@gmail.com>

Philip-21 and others added 3 commits October 14, 2023 21:35

Merge branch 'layer5labs:master' into playwright-test

714a12f

reimplementing screenshots

8dfd266

Signed-off-by: Philip-21 <philipuzomaobiora@gmail.com>

Merge branch 'playwright-test' of https://github.com/Philip-21/meshma…

a96a237

…p-snapshot into playwright-test

Philip-21 mentioned this pull request Oct 18, 2023

Playwright master test #53

Merged

1 task

Philip-21 merged commit a96a237 into layer5labs:master Oct 18, 2023
2 of 6 checks passed

Playwright test #51

Playwright test #51

Conversation

Philip-21 commented Sep 10, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

VaibhavMalik4187 commented Sep 11, 2023

VaibhavMalik4187 commented Sep 11, 2023

Philip-21 commented Sep 11, 2023 • edited

Philip-21 commented Sep 11, 2023 • edited

VaibhavMalik4187 commented Sep 11, 2023 • edited

Aritra8438 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Philip-21 Sep 16, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Philip-21 commented Sep 11, 2023 • edited

Philip-21 commented Sep 12, 2023

VaibhavMalik4187 Sep 13, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Philip-21 commented Sep 17, 2023 • edited

MarioArriaga92 Sep 23, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Philip-21 commented Sep 23, 2023

hamza-mohd commented Sep 27, 2023

Philip-21 commented Sep 28, 2023

MarioArriaga92 commented Sep 28, 2023

MarioArriaga92 commented Sep 28, 2023

hamza-mohd commented Sep 29, 2023

Abhishek-kumar09 commented Oct 14, 2023

leecalcote commented Oct 18, 2023

Philip-21 commented Oct 20, 2023 via email

Philip-21 commented Sep 11, 2023 •

edited

Philip-21 commented Sep 11, 2023 •

edited

VaibhavMalik4187 commented Sep 11, 2023 •

edited

Philip-21 Sep 16, 2023 •

edited

Philip-21 commented Sep 11, 2023 •

edited

VaibhavMalik4187 Sep 13, 2023 •

edited

Philip-21 commented Sep 17, 2023 •

edited

MarioArriaga92 Sep 23, 2023 •

edited