Theme Designer QA Test Outline

1. Theme Designer Regression Testing: Theme Testing

Pre-requisite(s):

Test environment must be using Cloud/PUI and/or the Theme Designer Theme

Notes:

Do not save your changes during this testing, however if you do you can use the backup file that you download during test execution to restore the site theme.
Do not make any theme changes in Isolated during this testing. It is important to preserve the base theme as-is in Isolated for validation purposes.

Theme Test Execution Steps: Planning and Setup

Theme Test Execution Steps: Planning and Setup
Action	Inputs	Expected Result	Actual Result
While reviewing the work performed, flag any cards that involve UI updates or bugfixes in PUI or Legacy UI. These are candidates for inclusion in regression testing Aspenware Design System (ADS) properties that are controlled by Theme Designer. Have the engineer(s) that worked the card(s) help identify if any “ADS” properties apply to the element that should be included in regression testing.	Jira card review and individual contributor feedback.	You should have a list of elements and “ADS” properties that need to be included in regression testing.	N/A
Install and Enable Theme Designer App	Theme Designer V2 (TD) User Guide \| Installing the TD App	You should be able to enable the Theme Designer application in your browser via the TamperMonkey extension. If you need assistance enabling the TD App, refer to the user guide or ask for assistance from engineering in the #purchase-support Slack channel.	N/A
Validate the loaded version of Theme Designer App is on the latest release. The version information is displayed below the Theme Designer logo in the application.	The version displayed in the TD app and release version documentation	Latest release of Theme Designer App is loaded in your browser. If you need to update the version, see the Theme Designer guide. If you still cannot get TD on the latest version, ask for assistance from engineering in the #purchase-support Slack channel.	N/A

Theme Test Execution Steps: Regression Testing

Theme Test Execution Steps: Regression Testing
Action	Inputs	Expected Result	Actual Result
Navigate in the browser to the product or page identified for regression testing	Web address of test location	Theme Designer App should load on the page after a brief moment on the left side of the screen and expand. The page content should shift to accommodate the App. If it does not, make sure you have enabled it in TamperMonkey and then refresh the page. If the application still does not load, ask for assistance from engineering in the #purchase-support Slack channel.	N/A
Make a Backup of the current theme for easy restoration after testing is complete.	In the Theme Designer App, select `Options > Download Backup`. Save the backup to your computer in a place you can easily find later.	A backup of the CSS file for the site theme should be downloaded to your computer. If backup does not download as a result of an application error in the console or in the application, screenshot any errors and ask for assistance from engineering in the #purchase-support Slack channel.	N/A
Inside of the Theme Designer application, locate the theme properties that apply to the element(s) being tested. Theme properties are organized in a parent/child hierarchy as you dig down though the accordion.	Click through the accordion to drill down to the element being tested. Note that not all elements have direct properties to theme.	You have located the group of properties that apply theme properties to the element being tested. Missing theme-able element settings that are identified for testing are considered a failure UNLESS there was an intentional design change that eliminated them indicated in the release notes, Jira notes, or indicated in the design system on Figma/Zeplin.
In a new browser tab/window navigate to Isolated environment and ensure the Theme Designer App is enabled.	In a new tab enter the web address for Isolated. Click through the accordion to drill down to the element being tested.	You have located the group of properties that apply theme properties to the element being tested.	N/A
If testing more than one group of properties, repeat the following test steps for each group.
Validate that the group of properties available for theming the element matches those displayed in the Theme Designer app on Isolated.	In a new browser tab, Navigate to a page/product on Isolated that uses the same element being tested in your QA environment. It does not have to be the same page as the test site, but the same element(s) being tested must be displayed.	The types, parents, and names of the properties displayed with controls in the Theme Designer App should match in both environments unless the regression testing identified that the element had planned theme changes since last regression. Any discrepancy in the naming, parents, or number of properties here should be considered a test failure unless otherwise indicated by test notes or developer input (eg, intentional theme property changes are not a failure). The property values* do not need to match between the environments. Only the names, parents, and number of properties that can be adjusted need to match.*
In the page identified for regression testing (ie, not Isolated), confirm that the displayed controls for the element are still controlling the theming of the target element.	Make a change to each input value in the theme control group for the target element and observe the changes in real time. Do not click save to save your changes.	You are on a page that has the element displayed that you are testing and you see the changes you make in the TD App applying to the element in real-time. Any updates applied in the Theme Designer app that apply to the element being tested that are not observed in real time in the test site should be considered a failure.

Theme Test Execution Steps: Post Testing Steps

Theme Test Execution Steps: Post Testing Steps

Action

Inputs

Expected Result

Actual Result

Restore theme

Refresh the page to restore the original theme settings.

If you accidentally saved your changes during testing and overwrote the theme file, upload your backup file that you downloaded earlier (Options > Upload Backup) and then click Save to restore the theme.

If you change images during the testing and want to revert to the original when complete, you will have to upload the original image again to fix the image path.

The theme is restored to the pre testing state after you uploaded it and clicked save in the TD App.

When you hard refresh the page, the restored theme is preserved.

If restoration fails, ask for assistance from engineering in the #purchase-support Slack channel.

N/A

Optional: Disable Theme Designer App in your browser

Click the TamperMonkey Extension Icon > Click the checkmark next to Theme Designer to disable it. It should change to a red X.

There is a red X next to the Theme Designer label in the TamperMonkey dropdown.

Theme Designer is disabled and does not automatically open in every new tab in your browser.

If you need assistance disabling the App, ask for assistance from engineering in the #purchase-support Slack channel.

N/A

2. Theme Designer Regression Testing: Application Testing