Setting up your testing suite

Setting up your testing suite

Setting up the testing suite will take a bit of work, but once you get it going, it works like charm! Let's dive into what you need to do to get the testing suite up and running.

Note

After you install the testing suite, our installation process will automatically copy required files and try to append some lines to your .gitignore in the main magento2 folder.

You can read more about these files below and in the chapter Included files and folders.

🧪 Installing the suite

Before you install the suite, please check the requirements! Installing the suite can be done in these three steps:

1. Create a playwright/ directory inside your theme’s web folder. Navigate to the web folder of your theme. Our testing suite assumes this is located in app/design/frontend/{vendor}/{theme}/. Within this folder, create a playwright folder, then navigate to it:

cd app/design/frontend/demo-store/demo-theme/web
mkdir playwright
cd playwright

2. Initialize an npm project:

npm init -y

3. Install the testing suite package: Lastly, simply run the command to install the elgentos Magento2 Playwright package, and the installation script will set things up for you! You will be prompted to input values for the .env variables, but these also come with default values.

npm install @elgentos/magento2-playwright

Tip

Now that the testing suite installation has run, please read the section below to understand what exactly was installed.

What has been installed

After installation, your playwright folder should have a variety of files and folders. Most importantly, these are:

1. auth-storage folder: this is currently not used by our suite.
2. base-tests folder: contains our tests without changes
3. tests folder: contains copies of our tests you can freely customize.
4. node_modules folder: contains everything the suite needs.
5. .env file: contains variables we recommend you set for the testing suite.
6. playwright.config.ts: a file with global Playwright settings
7. tsconfig.json: this file allows the existence of base-tests and tests.
8. build.js and install.js: these help with the set-up of the testing suite.
9. translate-json.js: this file will automatically translate your csv files from the i18n folder.

You can read more about what these files do in the chapter Included files and folders.

⏸️ Before you can run the suite...

After the installation, a variety of folders will have been created. Most notable in these are base-tests, which contain the tests without alteration, and tests. You should never make changes directly to the base-tests folder, as this may break functionality. However, note that the base-tests can be updated when you upgrade the package, so always review any changes after an update.

🤖 Run the setup… then you can run the suite!

Finally, before running the testing suite, you should run setup.spec.ts. This test performs a few steps to ensure your Magento 2 webshop is properly configured to run the tests. The setup should be performed again when your server resets. You can run this using the following command:

npx playwright test --grep "@setup" --trace on

If you have a Makefile in your root magento2 folder, we recommend setting up our Makefile.playwright. After that - you’re all set! 🥳 You can run the testing suite - feel free to skip the setup next time you run the tests:

npx playwright test --grep-invert "@setup" --trace on

What's next?

Well, you can now run the testing suite! To check if your testing suite is set up correctly, try running the smoke tests with the following command:

npx playwright test --grep "@smoke" --trace on

If this succeeds, you've set things up correctly! We recommend checking out the chapter Included files and folders to learn everything you need to know about the suite.