Generation
UI Test
UI Testing
Introduction
This guide explains how to generate UI Tests with Skyramp using traces. Throughout this guide, we will demonstrate key capabilities using Skyramp’s Demo Shop, a simple e-commerce application for product and order management. Learn more about the Demo Shop.
Prerequisites
Skyramp CLI installed
Relevant libraries are installed (ie, Python, TypeScript libraries)
Docker is installed and running (for trace collection only)
Refer to the Installation Guide if you haven't installed Skyramp yet.
Overview
A UI test is a test that verifies the visual elements and functionality of an application's user interface. A UI test ensures that the UI elements (buttons, text fields, menus, etc.) are displayed correctly, work as expected, and provide a smooth, intuitive user experience.
To reliably generate UI tests, Skyramp requires a trace.
What is a trace?
A trace is a log of a set of actions executed in a particular window or scenario in your system. Traces can be used to simulate real-world scenarios of product usage, and those traces can in turn be used to generate tests that give you confidence that said scenario will be resilient in production traffic.
Skyramp can collect traffic from UI interactions leveraging Playwright. By following these simple steps, you'll be able to collect a trace that you can directly supply for the Skyramp test generation.
Start Trace Collection
Want to skip straight to test generation? Download the following Playwright trace and skip to “Generate UI Test from Trace”
To start collecting traces, you need to run the following command.
skyramp generate trace \
--playwright \
--playwright-output
This command will spawn a new shell configured to collect all relevant backend network traffic as well as a Playwright Browser and Inspector. As this guide focuses on UI Test Generation, the newly spawned shell has no direct use, and all user interactions will be recorded through the Playwright Browser. The first time you run this command, it might take a while to bring up Skyramp.
Explanation of Command
--playwright: Enable Playwright to capture UI activities (default: false)--playwright-output: Specify the name of the generated Playwright trace file (default: skyramp_playwright.zip)
Additional Flags:
--docker-network: Specify the name (string) of your Docker network.--docker-skyramp-port: Specify a port number for Skyramp (default=35142).
Record Scenario
We now leverage the freshly spawned Playwright Browser to collect the traces for our test scenario. Here is a quick summary of the scenario:
Create a new product
Assert the price of the newly added product
Create a new order with the new product
Cancel the order
Delete the product
Let's get started!
1. Create a new product
Navigate to https://demoshop.skyramp.dev/products in the newly spawned web browser
Click on “Add Product”
Fill out product details as shown in screenshot and hit “Submit”
This should redirect you to the Product Details page
2. Assert the price of the newly added product
Assert that the price appear correctly
Click on the 'ab' button
Click on the price of the newly created product
This will ask you to generate an assertion that the element contains the text “$999”. Click the checkmark.
3. Create an order with the new product
Click on the “Orders” tab in the navigation bar
Click on “Add Order” at the top of the screen
Fill in the order details as shown below and click "Add Order"
You should now be on the Order Details page.
4. Cancel the order
Click on "Cancel Order"
5. Delete the product
Navigate to the Products page
Select the “View Details” button of the SkyPhone 1 product
Click on “Delete Product” at the bottom of the screen
End Trace Collection
Once the scenario is completed, you can end the trace collection in the spawned shell with Ctrl + D. You will see for which endpoints Skyramp was also able to collect backend traces - this might be a very long list as we didn’t apply filtering, but for this guide, all backend traces are irrelevant.
Skyramp creates two trace files: skyramp-traces.json and ui_test_playwright.zip. The first file only contains the backend traces that were collected and is not relevant for this guide. The zip file includes all collected traces from Playwright and will be used for the UI test generation.
Here is an example Playwright trace.
UI Testing
Introduction
This guide explains how to generate UI Tests with Skyramp using traces. Throughout this guide, we will demonstrate key capabilities using Skyramp’s Demo Shop, a simple e-commerce application for product and order management. Learn more about the Demo Shop.
Prerequisites
Skyramp CLI installed
Relevant libraries are installed (ie, Python, TypeScript libraries)
Docker is installed and running (for trace collection only)
Refer to the Installation Guide if you haven't installed Skyramp yet.
Overview
A UI test is a test that verifies the visual elements and functionality of an application's user interface. A UI test ensures that the UI elements (buttons, text fields, menus, etc.) are displayed correctly, work as expected, and provide a smooth, intuitive user experience.
To reliably generate UI tests, Skyramp requires a trace.
What is a trace?
A trace is a log of a set of actions executed in a particular window or scenario in your system. Traces can be used to simulate real-world scenarios of product usage, and those traces can in turn be used to generate tests that give you confidence that said scenario will be resilient in production traffic.
Skyramp can collect traffic from UI interactions leveraging Playwright. By following these simple steps, you'll be able to collect a trace that you can directly supply for the Skyramp test generation.
Start Trace Collection
Want to skip straight to test generation? Download the following Playwright trace and skip to “Generate UI Test from Trace”
To start collecting traces, you need to run the following command.
skyramp generate trace \
--playwright \
--playwright-output
This command will spawn a new shell configured to collect all relevant backend network traffic as well as a Playwright Browser and Inspector. As this guide focuses on UI Test Generation, the newly spawned shell has no direct use, and all user interactions will be recorded through the Playwright Browser. The first time you run this command, it might take a while to bring up Skyramp.
Explanation of Command
--playwright: Enable Playwright to capture UI activities (default: false)--playwright-output: Specify the name of the generated Playwright trace file (default: skyramp_playwright.zip)
Additional Flags:
--docker-network: Specify the name (string) of your Docker network.--docker-skyramp-port: Specify a port number for Skyramp (default=35142).
Record Scenario
We now leverage the freshly spawned Playwright Browser to collect the traces for our test scenario. Here is a quick summary of the scenario:
Create a new product
Assert the price of the newly added product
Create a new order with the new product
Cancel the order
Delete the product
Let's get started!
1. Create a new product
Navigate to https://demoshop.skyramp.dev/products in the newly spawned web browser
Click on “Add Product”
Fill out product details as shown in screenshot and hit “Submit”
This should redirect you to the Product Details page
2. Assert the price of the newly added product
Assert that the price appear correctly
Click on the 'ab' button
Click on the price of the newly created product
This will ask you to generate an assertion that the element contains the text “$999”. Click the checkmark.
3. Create an order with the new product
Click on the “Orders” tab in the navigation bar
Click on “Add Order” at the top of the screen
Fill in the order details as shown below and click "Add Order"
You should now be on the Order Details page.
4. Cancel the order
Click on "Cancel Order"
5. Delete the product
Navigate to the Products page
Select the “View Details” button of the SkyPhone 1 product
Click on “Delete Product” at the bottom of the screen
End Trace Collection
Once the scenario is completed, you can end the trace collection in the spawned shell with Ctrl + D. You will see for which endpoints Skyramp was also able to collect backend traces - this might be a very long list as we didn’t apply filtering, but for this guide, all backend traces are irrelevant.
Skyramp creates two trace files: skyramp-traces.json and ui_test_playwright.zip. The first file only contains the backend traces that were collected and is not relevant for this guide. The zip file includes all collected traces from Playwright and will be used for the UI test generation.
Here is an example Playwright trace.
UI Testing
Introduction
This guide explains how to generate UI Tests with Skyramp using traces. Throughout this guide, we will demonstrate key capabilities using Skyramp’s Demo Shop, a simple e-commerce application for product and order management. Learn more about the Demo Shop.
Prerequisites
Skyramp CLI installed
Relevant libraries are installed (ie, Python, TypeScript libraries)
Docker is installed and running (for trace collection only)
Refer to the Installation Guide if you haven't installed Skyramp yet.
Overview
A UI test is a test that verifies the visual elements and functionality of an application's user interface. A UI test ensures that the UI elements (buttons, text fields, menus, etc.) are displayed correctly, work as expected, and provide a smooth, intuitive user experience.
To reliably generate UI tests, Skyramp requires a trace.
What is a trace?
A trace is a log of a set of actions executed in a particular window or scenario in your system. Traces can be used to simulate real-world scenarios of product usage, and those traces can in turn be used to generate tests that give you confidence that said scenario will be resilient in production traffic.
Skyramp can collect traffic from UI interactions leveraging Playwright. By following these simple steps, you'll be able to collect a trace that you can directly supply for the Skyramp test generation.
Start Trace Collection
Want to skip straight to test generation? Download the following Playwright trace and skip to “Generate UI Test from Trace”
To start collecting traces, you need to run the following command.
skyramp generate trace \
--playwright \
--playwright-output
This command will spawn a new shell configured to collect all relevant backend network traffic as well as a Playwright Browser and Inspector. As this guide focuses on UI Test Generation, the newly spawned shell has no direct use, and all user interactions will be recorded through the Playwright Browser. The first time you run this command, it might take a while to bring up Skyramp.
Explanation of Command
--playwright: Enable Playwright to capture UI activities (default: false)--playwright-output: Specify the name of the generated Playwright trace file (default: skyramp_playwright.zip)
Additional Flags:
--docker-network: Specify the name (string) of your Docker network.--docker-skyramp-port: Specify a port number for Skyramp (default=35142).
Record Scenario
We now leverage the freshly spawned Playwright Browser to collect the traces for our test scenario. Here is a quick summary of the scenario:
Create a new product
Assert the price of the newly added product
Create a new order with the new product
Cancel the order
Delete the product
Let's get started!
1. Create a new product
Navigate to https://demoshop.skyramp.dev/products in the newly spawned web browser
Click on “Add Product”
Fill out product details as shown in screenshot and hit “Submit”
This should redirect you to the Product Details page
2. Assert the price of the newly added product
Assert that the price appear correctly
Click on the 'ab' button
Click on the price of the newly created product
This will ask you to generate an assertion that the element contains the text “$999”. Click the checkmark.
3. Create an order with the new product
Click on the “Orders” tab in the navigation bar
Click on “Add Order” at the top of the screen
Fill in the order details as shown below and click "Add Order"
You should now be on the Order Details page.
4. Cancel the order
Click on "Cancel Order"
5. Delete the product
Navigate to the Products page
Select the “View Details” button of the SkyPhone 1 product
Click on “Delete Product” at the bottom of the screen
End Trace Collection
Once the scenario is completed, you can end the trace collection in the spawned shell with Ctrl + D. You will see for which endpoints Skyramp was also able to collect backend traces - this might be a very long list as we didn’t apply filtering, but for this guide, all backend traces are irrelevant.
Skyramp creates two trace files: skyramp-traces.json and ui_test_playwright.zip. The first file only contains the backend traces that were collected and is not relevant for this guide. The zip file includes all collected traces from Playwright and will be used for the UI test generation.
Here is an example Playwright trace.
Python
Generate UI Test from Trace
Run the following command in your terminal to generate the UI test:
skyramp generate ui rest \
--language python \
--framework pytest \
--playwright-trace
Upon completion, Skyramp creates a fully executable Python test file (ui_test.py) that can be run immediately.
Explanation of Command
NOTE: Unlike other commands, test generation from a trace does not require a specified URL - we extract all relevant information directly from the trace.
--language: Specifies the test output language.--framework: Specifies the test execution framework of choice.--playwright-trace: Points to the Playwright trace file to use for test generation
Additional Flags
These flags will help you tune the UI test. Additional flags are explained here.
--output: Specify the name of the generated test file.
Execute the UI Test
You can execute the generated tests without any additional adjustments to the code. Here are the benefits of a Skyramp UI Test:
Smart Selectors
Skyramp generates intelligent UI selectors that automatically adapt to application changes and avoids brittle selectors that break with every UI update. Instead of relying on fragile CSS classes or XPath positions, it creates robust selectors using semantic HTML structure, visual context, and multiple fallback strategies. This dramatically reduces test maintenance overhead, eliminates false test failures that block deployments, and allows teams to focus on building features rather than constantly fixing broken tests.
Hydration
Skyramp automatically adds intelligent waiting logic in the test to ensure that a web page fully loads its JavaScript code (a process otherwise known as hydration). These waits lead to less flaky tests since they ensure elements on the page being validated against appear and do not cause the test to timeout.
Modularization and Parameterization
If an E2E test is generated via the Skyramp Agentic Experience (available via VSCode Extension or MCP Server), the generated test will be automatically parameterized and modularized to make the test code more readable and allow for potential re-usability of code. For more information about the Skyramp Agentic Experience, please join the waitlist.
Run the Test
Run the test using Pytest. If you don’t have Pytest, refer to the Installation Guide for setup instructions:
python3 -m pytest --browserAdjustments
--headed- See the test run live on the browser
Review Test Results
We are using Pytest’s default test output in this guide, printing a line for each test that is being run and listing all failures at the end. You can adjust the output behavior by following this documentation.
Next Steps
Congratulations on generating a UI test from traces with Skyramp! To learn more about how you can generate E2E tests with both UI actions and backend calls, refer to the E2E Testing Documentation.
Related topics
Python
Generate UI Test from Trace
Run the following command in your terminal to generate the UI test:
skyramp generate ui rest \
--language python \
--framework pytest \
--playwright-trace
Upon completion, Skyramp creates a fully executable Python test file (ui_test.py) that can be run immediately.
Explanation of Command
NOTE: Unlike other commands, test generation from a trace does not require a specified URL - we extract all relevant information directly from the trace.
--language: Specifies the test output language.--framework: Specifies the test execution framework of choice.--playwright-trace: Points to the Playwright trace file to use for test generation
Additional Flags
These flags will help you tune the UI test. Additional flags are explained here.
--output: Specify the name of the generated test file.
Execute the UI Test
You can execute the generated tests without any additional adjustments to the code. Here are the benefits of a Skyramp UI Test:
Smart Selectors
Skyramp generates intelligent UI selectors that automatically adapt to application changes and avoids brittle selectors that break with every UI update. Instead of relying on fragile CSS classes or XPath positions, it creates robust selectors using semantic HTML structure, visual context, and multiple fallback strategies. This dramatically reduces test maintenance overhead, eliminates false test failures that block deployments, and allows teams to focus on building features rather than constantly fixing broken tests.
Hydration
Skyramp automatically adds intelligent waiting logic in the test to ensure that a web page fully loads its JavaScript code (a process otherwise known as hydration). These waits lead to less flaky tests since they ensure elements on the page being validated against appear and do not cause the test to timeout.
Modularization and Parameterization
If an E2E test is generated via the Skyramp Agentic Experience (available via VSCode Extension or MCP Server), the generated test will be automatically parameterized and modularized to make the test code more readable and allow for potential re-usability of code. For more information about the Skyramp Agentic Experience, please join the waitlist.
Run the Test
Run the test using Pytest. If you don’t have Pytest, refer to the Installation Guide for setup instructions:
python3 -m pytest --browserAdjustments
--headed- See the test run live on the browser
Review Test Results
We are using Pytest’s default test output in this guide, printing a line for each test that is being run and listing all failures at the end. You can adjust the output behavior by following this documentation.
Next Steps
Congratulations on generating a UI test from traces with Skyramp! To learn more about how you can generate E2E tests with both UI actions and backend calls, refer to the E2E Testing Documentation.
Related topics
Python
Generate UI Test from Trace
Run the following command in your terminal to generate the UI test:
skyramp generate ui rest \
--language python \
--framework pytest \
--playwright-trace
Upon completion, Skyramp creates a fully executable Python test file (ui_test.py) that can be run immediately.
Explanation of Command
NOTE: Unlike other commands, test generation from a trace does not require a specified URL - we extract all relevant information directly from the trace.
--language: Specifies the test output language.--framework: Specifies the test execution framework of choice.--playwright-trace: Points to the Playwright trace file to use for test generation
Additional Flags
These flags will help you tune the UI test. Additional flags are explained here.
--output: Specify the name of the generated test file.
Execute the UI Test
You can execute the generated tests without any additional adjustments to the code. Here are the benefits of a Skyramp UI Test:
Smart Selectors
Skyramp generates intelligent UI selectors that automatically adapt to application changes and avoids brittle selectors that break with every UI update. Instead of relying on fragile CSS classes or XPath positions, it creates robust selectors using semantic HTML structure, visual context, and multiple fallback strategies. This dramatically reduces test maintenance overhead, eliminates false test failures that block deployments, and allows teams to focus on building features rather than constantly fixing broken tests.
Hydration
Skyramp automatically adds intelligent waiting logic in the test to ensure that a web page fully loads its JavaScript code (a process otherwise known as hydration). These waits lead to less flaky tests since they ensure elements on the page being validated against appear and do not cause the test to timeout.
Modularization and Parameterization
If an E2E test is generated via the Skyramp Agentic Experience (available via VSCode Extension or MCP Server), the generated test will be automatically parameterized and modularized to make the test code more readable and allow for potential re-usability of code. For more information about the Skyramp Agentic Experience, please join the waitlist.
Run the Test
Run the test using Pytest. If you don’t have Pytest, refer to the Installation Guide for setup instructions:
python3 -m pytest --browserAdjustments
--headed- See the test run live on the browser
Review Test Results
We are using Pytest’s default test output in this guide, printing a line for each test that is being run and listing all failures at the end. You can adjust the output behavior by following this documentation.
Next Steps
Congratulations on generating a UI test from traces with Skyramp! To learn more about how you can generate E2E tests with both UI actions and backend calls, refer to the E2E Testing Documentation.