feat(PPDSC-2313): script to run applitools locally

[mstuartf]

PPDSC-2313

What

1. Background - why this is needed

• Lack of information in the repo on how to run Applitools tests locally
• Pipeline debugging is slow and expensive

3. What did you do

• Shell script to set env variables (inc asking for api key)
• Add scripts to package json to run comp and doc tests
• Considered dockerising the script but felt like overkill

4. What does the reviewers should expect

• To be able to run applitools tests locally using a single command

The script will guide the user to run fewer tests by using the include config option, then ask for an api key:

Then when the suite has finished the results and a link to the batch in the Applitools UI are shown:

I have done:

• Written unit tests against changes
• Written functional tests against the component and/or NewsKit site
• Updated relevant documentation

I have tested manually:

• The feature's functionality is working as expected on Chrome, Firefox, Safari and Edge
• The screen reader reads and flows through the elements as expected.
• There are no new errors in the browser console coming from this PR.
• When visual test is not added, it renders correctly on different browsers and mobile viewports (Safari, Firefox, small mobile viewport, tablet)
• The Playground feature is working as expected

Before:

After:

Who should review this PR:

How to test:

[newskit-engineering]

You can preview these changes on:
Documentation Site: http://ncu-newskit-docs.s3-website-eu-west-1.amazonaws.com/ppdsc-2313-run-applitools-locally
Storybook: http://ncu-newskit-docs.s3-website-eu-west-1.amazonaws.com/ppdsc-2313-run-applitools-locally/storybook

[Vanals]

How this script will be fitting the development flow? In which scenario can be run or should be run?
As you mentioned, I guess, we can run it when we already know it is gonna fail and we don't want to wait the whole pipeline to run? Ta!

[mstuartf]

How this script will be fitting the development flow? In which scenario can be run or should be run? As you mentioned, I guess, we can run it when we already know it is gonna fail and we don't want to wait the whole pipeline to run? Ta!

Yep. The idea is that if you know you will have to resolve some tests because you have made visual changes, you don't have to run the whole pipeline (and all >1,600 tests) before being able to resolve them. You can run them locally, resolve any changes, then when your pipeline runs they should all pass.

Alternatively, if you want to make sure that you have not made any visual changes that are going to cause the pipeline to fail, this script is a quick way to check.

The general idea is that this will make resolving and debugging Applitools quicker for devs and will reduce our usage.