test(e2e): screenshots matching

cypress.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from 'cypress';
+import { initPlugin } from '@frsource/cypress-plugin-visual-regression-diff/plugins';
 import * as dotenv from 'dotenv';
 
 dotenv.config();
@@ -11,6 +12,9 @@ export default defineConfig({
     e2e: {
         baseUrl: 'http://localhost:3000',
         supportFile: false,
+        setupNodeEvents(on, config) {
+            initPlugin(on, config);
+        },
     },
     video: false,
     viewportWidth: 1280,

cypress/e2e/auth.cy.ts

@@ -1,7 +1,25 @@
+import { routes } from '../../src/hooks/router';
 import '../support';
 
 describe('Auth', () => {
     it('sign in with email credentials as default admin', () => {
-        cy.signInViaEmail();
+        /**
+         * We are not using signInViaEmail command here
+         * because we want to check view via screenshot.
+         */
+        cy.visit(routes.index());
+        cy.exactUrl(routes.signIn());
+        /**
+         * This is default page by nextjs.
+         * It's impossible to use dom-objects.
+         * @see https://github.com/taskany-inc/issues/issues/136
+         */
+        cy.get('.signin').matchImage({
+            title: 'signinForm',
+        });
+
+        cy.get('input[name=email]').type(Cypress.env('ADMIN_EMAIL'));
+        cy.get('input[name=password]').type(`${Cypress.env('ADMIN_PASSWORD')}{enter}`);
+        cy.exactUrl(routes.index());
     });
 });

cypress/e2e/projects.cy.ts

@@ -12,7 +12,6 @@ import {
     projectSubmitButton,
     projectTitleInput,
 } from '../../src/utils/domObjects';
-import { exactUrl } from '../helpers';
 import { routes } from '../../src/hooks/router';
 import { keyPredictor } from '../../src/utils/keyPredictor';
 
@@ -31,6 +30,10 @@ describe('Projects', () => {
             // NB: no way to test in all locales, but this test runs via keyCode.
             // It means doesn't matter what letter on key. It must work.
             it('should open and close dialog via hotkey', () => {
+                /**
+                 * This is magic waiting.
+                 * If you press hokeys immediately nothing will happen.
+                 */
                 cy.wait(50);
                 cy.realPress('C').realPress('P');
 
@@ -63,7 +66,10 @@ describe('Projects', () => {
             it('should have clean fields', () => {
                 cy.get(projectTitleInput.query).should('have.value', '');
                 cy.get(projectDescriptionInput.query).should('have.value', '');
-                // screenshot
+                cy.get(projectCreateForm.query).matchImage({
+                    title: 'emptyForm',
+                    screenshotConfig: { padding: 40 },
+                });
             });
 
             it('should create project with recommended key', () => {
@@ -73,13 +79,15 @@ describe('Projects', () => {
 
                 cy.get(projectKeyPredictorHint.query).should('contain.text', `#${testProjectKey}-42`);
                 cy.get(projectKeyPredictorHint.query).should('contain.text', `#${testProjectKey}-911`);
-                // screenshot
+                cy.get(projectCreateForm.query).matchImage({
+                    title: 'keyPredictorHint',
+                    screenshotConfig: { padding: 40 },
+                });
 
                 cy.get(projectSubmitButton.query).click();
 
-                cy.url().should('equal', exactUrl(routes.project(testProjectKey)));
+                cy.exactUrl(routes.project(testProjectKey));
                 cy.get(projectCreateForm.query).should('not.exist');
-                // screenshot
             });
 
             it('should create project with custom key', () => {
@@ -88,50 +96,59 @@ describe('Projects', () => {
                 cy.get(projectKeyPredictor.query).click();
 
                 cy.get(projectKeyPredictorError.query).should('exist');
-                // screenshot
+                cy.get(projectCreateForm.query).matchImage({
+                    title: 'keyPredictorError',
+                    screenshotConfig: { padding: 40 },
+                });
 
                 cy.get(projectKeyPredictorInput.query).clear();
                 cy.get(projectKeyPredictorInput.query).type(customKey);
                 cy.wait(1);
                 cy.get(projectKeyPredictorHint.query).should('contain.text', `#${customKey}-42`);
                 cy.get(projectKeyPredictorHint.query).should('contain.text', `#${customKey}-911`);
-                // screenshot
+                cy.get(projectCreateForm.query).matchImage({
+                    title: 'customKeyHint',
+                    screenshotConfig: { padding: 40 },
+                });
 
                 cy.get(projectSubmitButton.query).click();
 
-                cy.url().should('equal', exactUrl(routes.project(customKey)));
+                cy.exactUrl(routes.project(customKey));
                 cy.get(projectCreateForm.query).should('not.exist');
-                // screenshot
             });
 
             it('not allows to create project with too short title', () => {
                 cy.get(projectTitleInput.query).type('Tes');
                 cy.get(projectKeyPredictor.query).trigger('mouseover');
 
                 cy.get(projectKeyPredictorError.query).should('exist');
-                // screenshot
+                cy.get(projectCreateForm.query).matchImage({
+                    title: 'tooShortTitleError',
+                    screenshotConfig: { padding: 40 },
+                });
 
                 cy.get(projectSubmitButton.query).click();
 
                 cy.get(projectCreateForm.query).should('exist');
-                cy.url().should('equal', exactUrl(routes.index()));
-                // check field error
-                // screenshot
+                cy.exactUrl(routes.index());
             });
 
             it('not allows to create project with existing key', () => {
                 cy.get(projectTitleInput.query).type(testProjectTitle);
                 cy.get(projectKeyPredictor.query).trigger('mouseover');
 
                 cy.get(projectKeyPredictorError.query).should('exist');
-                // incorrect info in error
-                // screenshot
+                // FIXME: https://github.com/taskany-inc/issues/issues/1535
+                cy.get(projectCreateForm.query).matchImage({
+                    title: 'projectAlreadyExistError',
+                    screenshotConfig: { padding: 40 },
+                });
 
+                // FIXME: https://github.com/taskany-inc/issues/issues/1534
                 cy.get(projectSubmitButton.query).click();
 
                 cy.get(projectCreateForm.query).should('exist');
-                cy.url().should('equal', exactUrl(routes.index()));
-                // screenshot
+                cy.exactUrl(routes.index());
             });
         });
     });

cypress/index.d.ts

@@ -3,6 +3,7 @@ declare global {
     namespace Cypress {
         interface Chainable {
             signInViaEmail(): Chainable<void>;
+            exactUrl(relativeUrl: string): Chainable<void>;
         }
     }
 }

cypress/support/index.ts

@@ -1,14 +1,17 @@
 import 'cypress-real-events';
+import '@frsource/cypress-plugin-visual-regression-diff';
 
-import { exactUrl } from '../helpers';
 import { routes } from '../../src/hooks/router';
 
 Cypress.Commands.addAll({
     signInViaEmail: () => {
         cy.visit(routes.index());
-        cy.url().should('equal', exactUrl(routes.signIn()));
+        cy.exactUrl(routes.signIn());
         cy.get('input[name=email]').type(Cypress.env('ADMIN_EMAIL'));
         cy.get('input[name=password]').type(`${Cypress.env('ADMIN_PASSWORD')}{enter}`);
-        cy.url().should('equal', exactUrl(routes.index()));
+        cy.exactUrl(routes.index());
+    },
+    exactUrl: (relativeUrl: string) => {
+        cy.url().should('equal', `${Cypress.config('baseUrl')}${relativeUrl}`);
     },
 });