You can execute fully-automated Playwright tests upon the MediaCo sample application’s Embedded and Portal mode. You can run headed as well as headless tests. In the headed test, you see the test executing in real time; whereas, in the headless test, the test runs in the background, and you see only the result of the test. The commands for both test types are included in the following sections.

Due to browser interactions during login, it can be easier to find and fix this error using the Portal URL. If the tests fail, check the application configuration based on which the tests failed to fix the error. For information about troubleshooting errors, see Troubleshooting the Constellation SDKs.

Testing the Portal mode

The Portal mode test runs three tests on the MediaCo sample application; first as a Representative user creating a service request, then as a Manager user assigning a discount, and finally as a Technical user fulfilling and updating the service request.

1. Open a terminal or command prompt at the folder containing the SDK.
   This should be a separate terminal from the one running the webserver.
2. Run the test command for the Portal mode.
   1. Headed test: npx playwright test --headed --project=chromium MediaCo/portal 
   2. Headless test: npx playwright test --project=chromium MediaCo/portal
3. Wait for the tests to finish. You will see the test result in the terminal window.
   1. Headed test result:

      

   2. Headless test result: 

      

4. OPTIONAL. Create a test report by running the following command:
   npx playwright show-report

   

   

Here is a GIF showing the test in the Angular SDK:

Testing the Embedded mode

The Embedded mode test runs the MediaCo sample application as a Customer user creating a service request.

1. Open a terminal or command prompt at the folder containing the SDK.
   This should be a separate terminal from the one running the webserver.
2. Run the test command for the Embedded mode.
   1. Headed test: npx playwright test --headed --project=chromium MediaCo/embedded 
   2. Headless test: npx playwright test --project=chromium MediaCo/embedded
3. Wait for the tests to finish. You will see the test result in the terminal window.
   1. Headed test result:

      

   2. Headless test result: 

      

4. OPTIONAL. Create a test report by running the following command:
   npx playwright show-report

   

Here is GIF showing the test in the Angular SDK:

Testing both modes

Run tests on both modes using a single command as shown in the following procedure:

1. Open a terminal or command prompt at the folder containing the SDK.
   This should be a separate terminal from the one running the webserver.
2. Run the test command:
   1. Headed test: npx playwright test --headed 
   2. Headless test: npx playwright test 
3. Wait for the tests to finish. You will see the test result in the terminal window.
   1. Headed test result:

      

   2. Headless test result: 

      

4. OPTIONAL. Create a test report by running the following command:
   npx playwright show-report