Cypress visual testing integration #3136

revanth0212 · 2021-04-21T17:18:33Z

Description

Added Cypress Visual Testing plugin. With this, we can write tests that can capture snapshots of the page visually while testing.

Related Issue

Closes PWA-1661

Verification Stakeholders

@dpatil-magento

Verification Steps

Checkout the branch locally.
Navigate to the integration tests package.
Run yarn install
Run yarn test to start the cypress UI.
Run the sample visual test (pageBuilder/homePage.spec.js). Other tests you might see are dummy ones, ignore them for now.

Screenshots / Screen Captures (if appropriate)

Checklist

I have added tests to cover my changes, if necessary.
I have added translations for new strings, if necessary.
I have updated the documentation accordingly, if necessary.

PWAStudioBot · 2021-04-21T17:30:01Z

	Messages
📖	Associated JIRA tickets: PWA-1661.
📖	DangerCI Failures related to missing labels/description/linked issues/etc will persist until the next push or next nightly build run (assuming they are fixed).
📖	Access a deployed version of this PR here. Make sure to wait for the "pwa-pull-request-deploy" job to complete.

Generated by 🚫 dangerJS against e3a8e6c

supernova-at · 2021-04-23T14:23:00Z

venia-integration-tests/src/tests/pageBuilder/homePage.spec.js

@@ -0,0 +1,13 @@
+/// <reference types="cypress" />


Is this needed?

I am not totally sure, Dev left it in the file. But good question, Ill read up on it.

Yeah, it is needed for IntelliSense to suggest cypress auto completions.

supernova-at · 2021-04-23T14:25:08Z

venia-integration-tests/src/tests/pageBuilder/homePage.spec.js

+        it('should render page builder content correctly', () => {
+            cy.visit('/');
+
+            cy.wait(3000);


I feel like this is too short. A no-cache, hard refresh page load on https://develop.pwa-venia.com/ took 6000ms for me.

Maybe 10000 here?

https://docs.cypress.io/faq/questions/using-cypress-faq#How-can-I-make-Cypress-wait-until-something-is-visible-in-the-DOM

Yeah, you guys are right, but in the scope of this PR, I was working on introducing the plugin and integrating it not dint quite get into the test itself. In the following tickets, we can delegate this to the developer working on the ticket about what they think is the right choice of wait or use a helper as Dave suggested.

The test in this PR is a dummy one, just there to prove that this plugin works after the integration.

supernova-at · 2021-04-23T14:50:57Z

I got a couple errors while validating:

Error: The plugins file is missing or invalid.

Your `pluginsFile` is set to `path/to/pwa-studio/venia-integration-tests/src/plugins/index.js`, but either the file is missing, it contains a syntax error, or threw an error when required. The `pluginsFile` must be a `.js`, `.ts`, or `.coffee` file.

Or you might have renamed the extension of your `pluginsFile`. If that's the case, restart the test runner.

Please fix this, or set `pluginsFile` to `false` if a plugins file is not necessary for your project.

The file is definitely there and doesn't contain a syntax error. I'm not sure why / how it would throw an error when required.

I also got an "update" message immediately from Cypress saying 7.1.0 is out (we're on 6.8.0). Since we're just introducing Cypress I feel like we should be on the latest major version, at least. Do we have a reason we're not?

supernova-at

Verification errors

revanth0212 · 2021-04-23T14:54:33Z

I also got an "update" message immediately from Cypress saying 7.1.0 is out (we're on 6.8.0). Since we're just introducing Cypress I feel like we should be on the latest major version, at least. Do we have a reason we're not?

I have upgraded Cypress in this PR. Can you try yarn install in the folder instead of the outside which is pwa-studio? This package is not hooked up into yarn workspaces so doing a yarn install on the mono repo is not gonna install or update this package.

This was done on purpose because this package is just like docs, has nothing to do with pwa-studio from the outside world's perspective.

revanth0212 · 2021-05-05T16:32:15Z

I have made some changes to the comparison logic and hopefully, it will work across machines this time.

dpatil-magento · 2021-05-05T18:33:40Z

@revanth0212 It still fails when screen shot captured window size differs current running window size.

jimbo · 2021-05-10T16:55:38Z

venia-integration-tests/src/plugins/resizeSnapshotPlugin.js

+const fs = require('fs');
+const { matchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
+
+const resizeSnapshot = imageConfig => {


Is this the function that resolves differences in terms of resolution and pixel density?

Yes, that's the one.

jimbo · 2021-05-10T16:59:01Z

venia-integration-tests/src/support/__tests__/loadFullPageCommand.spec.js

+    delete global.Cypress;
+});
+
+test('sup', () => {


Can this test be skipped?

Oops, done 👍

anthoula · 2021-05-10T22:09:47Z

Tests pass. QA approved. Back @revanth0212 to confirm if there will be additional commits

dpatil-magento · 2021-05-11T17:19:54Z

QA Approved. Current UI tests are just demo ones and will be replaced soon.

dpatil-magento and others added 5 commits April 15, 2021 09:30

initial setup

505a32a

add test

7921a88

update

a58d5ec

Added logic to capture multiple snapshots of full page.

4e48d03

Created command to generate full page screenshot.

c2fbdd5

revanth0212 added the version: Minor This changeset includes functionality added in a backwards compatible manner. label Apr 21, 2021

m2-community-project bot added the Progress: ready for review label Apr 21, 2021

revanth0212 and others added 5 commits April 21, 2021 14:23

Updated full page screenshot logic.

d0abbc0

Deleting old screenshots.

2e0605d

Updated snapshot.

d798307

Added update snapshot script.

70cebe5

Merge branch 'develop' into dev/ui-test-poc3

55b025b

revanth0212 marked this pull request as ready for review April 22, 2021 18:23

revanth0212 added 2 commits April 22, 2021 13:25

Deleting unnecessary screenshots.

2554671

Updated snapshot.

cf746e4

supernova-at reviewed Apr 23, 2021

View reviewed changes

m2-community-project bot assigned supernova-at Apr 23, 2021

m2-community-project bot added Progress: review and removed Progress: ready for review labels Apr 23, 2021

m2-community-project bot assigned davemacaulay Apr 23, 2021

supernova-at requested changes Apr 23, 2021

View reviewed changes

m2-community-project bot added Progress: changes requested and removed Progress: review labels Apr 23, 2021

Using diff method for snapshot comparitions.

79f6d1b

m2-community-project bot added Progress: review and removed Progress: approved labels May 5, 2021

Merge branch 'develop' into dev/ui-test-poc3

d016293

revanth0212 added 4 commits May 6, 2021 10:36

Using smaller viewport.

b1fd270

Updated snapshot testing for DPI irrespective testing.

9f69c7a

Jest setup.

75b2576

Added filter modal test.

c132415

jimbo reviewed May 10, 2021

View reviewed changes

m2-community-project bot assigned jimbo May 10, 2021

revanth0212 added 3 commits May 10, 2021 14:14

Added command tests.

f20e2a3

Added resize plugin tests.

6fb91aa

Setting pixelRatio to 1 after resizing.

562b159

Merge branch 'develop' into dev/ui-test-poc3

e3a8e6c

dpatil-magento self-requested a review May 11, 2021 17:21

dpatil-magento approved these changes May 11, 2021

View reviewed changes

m2-community-project bot assigned dpatil-magento May 11, 2021

m2-community-project bot added Progress: approved and removed Progress: review labels May 11, 2021

dpatil-magento merged commit 907cb9b into develop May 11, 2021

dpatil-magento deleted the dev/ui-test-poc3 branch May 11, 2021 17:21

m2-community-project bot added Progress: done and removed Progress: approved labels May 11, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cypress visual testing integration #3136

Cypress visual testing integration #3136

revanth0212 commented Apr 21, 2021 •

edited by supernova-at

Loading

PWAStudioBot commented Apr 21, 2021 •

edited

Loading

supernova-at Apr 23, 2021

revanth0212 Apr 23, 2021

revanth0212 May 5, 2021

supernova-at Apr 23, 2021

davemacaulay Apr 23, 2021

revanth0212 Apr 23, 2021

supernova-at commented Apr 23, 2021

supernova-at left a comment

revanth0212 commented Apr 23, 2021

revanth0212 commented May 5, 2021

dpatil-magento commented May 5, 2021

jimbo May 10, 2021

revanth0212 May 10, 2021

jimbo May 10, 2021

revanth0212 May 10, 2021

anthoula commented May 10, 2021

dpatil-magento commented May 11, 2021

Cypress visual testing integration #3136

Cypress visual testing integration #3136

Conversation

revanth0212 commented Apr 21, 2021 • edited by supernova-at Loading

Description

Related Issue

Verification Stakeholders

Verification Steps

Screenshots / Screen Captures (if appropriate)

Checklist

PWAStudioBot commented Apr 21, 2021 • edited Loading

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

supernova-at commented Apr 23, 2021

supernova-at left a comment

Choose a reason for hiding this comment

revanth0212 commented Apr 23, 2021

revanth0212 commented May 5, 2021

dpatil-magento commented May 5, 2021

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

anthoula commented May 10, 2021

dpatil-magento commented May 11, 2021

revanth0212 commented Apr 21, 2021 •

edited by supernova-at

Loading

PWAStudioBot commented Apr 21, 2021 •

edited

Loading