test percy

Author: jotacoroe2y

.percy.js

@@ -1,7 +1,7 @@
 module.exports = {
   version: 2,
   percy: {
-    token: process.env.PERCY_TOKEN,
+    token: config.get('percy.token'),
     useSystemProxy: false,
     skipBaseBuild: false
   },

config/default.ts

@@ -1,7 +1,11 @@
-import { cucumberTags } from './wdio/cucumber-tags.ts';
+import { CUCUMBER_TAGS } from './wdio/cucumber-tags.ts';
 
 export default {
     cucumberTags: {
-        percy: cucumberTags.percy
+        normal: CUCUMBER_TAGS.normal,
+        percy: CUCUMBER_TAGS.percy
     },
+    percy: {
+        token: process.env.PERCY_TOKEN
+    }
 };

config/wdio/cucumber-tags.ts

@@ -1,6 +1,7 @@
 const SEPARATOR = ' and ';
 
-export const cucumberTags: Record<'percy' , string> =
+export const CUCUMBER_TAGS =
     {
-        percy: [' @visual', 'not @fixme', 'not @ignore'].join(SEPARATOR)
+        normal: ['not @percy', 'not @fixme', 'not @ignore'].join(SEPARATOR),
+        percy: [' @percy', 'not @fixme', 'not @ignore'].join(SEPARATOR)
     };

config/wdio/wdio-config-variables.ts

@@ -3,6 +3,10 @@ import config from 'config';
 type WdioConfigVariables = Record<string, { cucumberOptsTags: string; maxInstances: number }>;
 
 export const wdioConfigVariables: WdioConfigVariables = {
+    normal: {
+        cucumberOptsTags: config.get<string>('cucumberTags.normal'),
+        maxInstances: 2
+    },
     percy: {
         cucumberOptsTags: config.get<string>('cucumberTags.percy'),
         maxInstances: 2

features/step-definitions/hooks/before-hooks.ts

@@ -0,0 +1,7 @@
+import {Before} from '@cucumber/cucumber';
+import {engage} from '@serenity-js/core';
+
+import {Actors} from '../../../test/actors';
+import {TIME} from '../../../test/constants/datetime.ts';
+
+Before({ timeout: TIME.oneMinuteInMs }, () => engage(new Actors()));

features/step-definitions/percy-steps.ts

@@ -1,13 +1,15 @@
-import { Then } from '@cucumber/cucumber';
-import  percyScreenshot  from '@percy/webdriverio';
+import {Then} from '@cucumber/cucumber';
+import {Actor} from '@serenity-js/core';
 
 import {LoginForm} from '../../test/authentication/ui/LoginForm.ts';
+import {PercySnapshot} from '../../test/interactions/percy-snapshot.ts';
 import {GetLocator} from '../../test/questions/get-locator.ts';
 
-Then('the page should look like the baseline {string}', async (tag: string) =>
-    await percyScreenshot(tag)
+Then('{actor} checks the page should look like the baseline {string}', async (actor: Actor, tag: string) =>
+    await actor.attemptsTo(PercySnapshot(tag))
 );
 
-Then('the login form should look like the baseline {string}', async (tag: string) =>
-    await percyScreenshot(tag, {scope: `${GetLocator(LoginForm.wrapper())}`})
-);
+Then('{actor} checks the login form should look like the baseline {string}', async (actor: Actor, tag: string) => {
+    const locator = await actor.answer(GetLocator(LoginForm.loginButton()));
+    await actor.attemptsTo(PercySnapshot(tag, {scope: locator}))
+});

features/visual-testing/percy.feature

@@ -1,11 +1,11 @@
-Feature: Form-Based Authentication
+Feature: Percy Visual Testing
 
   In order to learn how to implement Percy visual testing
   As a Curious Developer
   I'd like to see an example
 
   Background:
-    Given Alice starts with the "Percy Visual Testing" example
+    Given User starts with the "Form Authentication" example
 
   @percy
   Scenario: Full page should not change
@@ -14,7 +14,7 @@ Feature: Form-Based Authentication
   that offers a pixel perfect visual testing service.
   Perfect for not missing any unexpected frontend change 😎
 
-    Then the page should look like the baseline "the-internet-login-form-full-page"
+    Then Percy checks the page should look like the baseline "the-internet-login-form-full-page"
 
   @percy
   Scenario: Element should not change
@@ -23,4 +23,4 @@ Feature: Form-Based Authentication
   existing on a page.
   Perfect if you need to reduce the scope in a page 😎
 
-    Then the login form should look like the baseline "the-internet-login-form-element"
+    Then Percy checks the login form should look like the baseline "the-internet-login-form-element"

package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "clean": "rimraf target",
     "test": "failsafe clean test:execute test:report",
-    "test:execute": "wdio wdio.conf.ts",
+    "test:visual": "failsafe clean test:percy test:report",
+    "test:execute": "export EXEC_MODE=normal wdio wdio.conf.ts",
     "test:percy": "export EXEC_MODE=percy && percy exec -- wdio wdio.conf.ts",
     "test:report": "serenity-bdd run --features ./features",
     "start": "mkdirp target/site/serenity && npx http-server -p 8080 target/site/serenity -s -o",

test/abilities/percy-screenshot.ts

@@ -0,0 +1,17 @@
+import { SnapshotOptions } from '@percy/core';
+import percyScreenshot from '@percy/webdriverio';
+import { Ability } from '@serenity-js/core';
+
+export class TakePercyScreenshot extends Ability {
+    constructor() {
+        super();
+    }
+
+    static using() {
+        return new TakePercyScreenshot();
+    }
+
+    async with(tag: string, options: SnapshotOptions) {
+        await percyScreenshot(tag, options);
+    }
+}

test/actors/index.ts

@@ -0,0 +1,27 @@
+import { Actor, Cast } from '@serenity-js/core';
+import {BrowseTheWeb} from '@serenity-js/web';
+
+import {TakePercyScreenshot} from '../abilities/percy-screenshot.ts';
+import {ACTOR_NAMES} from '../constants/actors.ts';
+
+export class Actors implements Cast {
+    prepare(actor: Actor): Actor {
+        switch (actor.name) {
+            case ACTOR_NAMES.Percy: {
+                return actor.whoCan(
+                    TakePercyScreenshot.using()
+                );
+            }
+            case ACTOR_NAMES.User: {
+                return actor.whoCan(
+                    BrowseTheWeb.as(actor)
+                );
+            }
+            default: {
+                throw new Error(
+                    `There is no actor defined with the given name: ${actor.name}`,
+                );
+            }
+        }
+    }
+}