Generation
UI Test
UI Testing
Introduction
This guide will show you how to generate UI tests for complex scenarios with Skyramp using Playwright traces. We'll demonstrate using Skyramp’s Demo Shop UI, a simple e-commerce tool 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 generate UI tests that span across multiple endpoints or services, Skyramp requires a trace to generate the test case reliably.
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. 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.
skyramp generate trace \
--playwright \
--runtime docker \
--playwright-output
Explanation of Command
--playwright: Enable Playwright to capture UI activities (default: false)--runtime: Select the environment in which the Skyramp trace collector gets deployed [Docker]
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
Find product on product list page
Edit the product
Delete the product
Let's get started!
1. Create a new product
Navigate to https://skyramp.dev/demoshop/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
Assert that the product details appear correctly
Click on the 'ab' button
Click on the name of the newly created product
This will ask you to generate an assertion that the element contains the text “SkyPhone 1”. Click the checkmark.
Repeat these steps for description, image URL, category, in stock, and price.
2. Find product on product list page
Click on “Products” at the top right of the browser
Find the product you just created
Assert that the product name and price appear correctly
Click on the button
Click on the name of the newly created product
This will ask you to generate an assertion that the element contains the text “SkyPhone 1”. Click the checkmark.
Repeat this step for price.
3. Edit the product
Click on “View Details” for the product you just created
Click on “Edit Product” at the bottom of the screen
Edit the product with new details
Click the “Save Product Details” button
Assert that the new product details appear correctly
Click on the 'ab' button
Click on the name of the newly created product
This will ask you to generate an assertion that the element contains the text “SkyPhone Pro 1”. Click the checkmark.
Repeat these steps for description, image URL, category, in stock, and price.
4. Delete the product
Click on “Delete Product” at the bottom of the screen
This should navigate you back to the products page
Assert that the red banner saying “Your product SkyPhone Pro 1 was deleted!” is visible
Click on the button
Click on the banner
This will generate an assertion that the banner is visible
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.
Open Screenshot 2025-06-23 at 10.55.40 AM.png
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 will show you how to generate UI tests for complex scenarios with Skyramp using Playwright traces. We'll demonstrate using Skyramp’s Demo Shop UI, a simple e-commerce tool 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 generate UI tests that span across multiple endpoints or services, Skyramp requires a trace to generate the test case reliably.
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. 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.
skyramp generate trace \
--playwright \
--runtime docker \
--playwright-output
Explanation of Command
--playwright: Enable Playwright to capture UI activities (default: false)--runtime: Select the environment in which the Skyramp trace collector gets deployed [Docker]
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
Find product on product list page
Edit the product
Delete the product
Let's get started!
1. Create a new product
Navigate to https://skyramp.dev/demoshop/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
Assert that the product details appear correctly
Click on the 'ab' button
Click on the name of the newly created product
This will ask you to generate an assertion that the element contains the text “SkyPhone 1”. Click the checkmark.
Repeat these steps for description, image URL, category, in stock, and price.
2. Find product on product list page
Click on “Products” at the top right of the browser
Find the product you just created
Assert that the product name and price appear correctly
Click on the button
Click on the name of the newly created product
This will ask you to generate an assertion that the element contains the text “SkyPhone 1”. Click the checkmark.
Repeat this step for price.
3. Edit the product
Click on “View Details” for the product you just created
Click on “Edit Product” at the bottom of the screen
Edit the product with new details
Click the “Save Product Details” button
Assert that the new product details appear correctly
Click on the 'ab' button
Click on the name of the newly created product
This will ask you to generate an assertion that the element contains the text “SkyPhone Pro 1”. Click the checkmark.
Repeat these steps for description, image URL, category, in stock, and price.
4. Delete the product
Click on “Delete Product” at the bottom of the screen
This should navigate you back to the products page
Assert that the red banner saying “Your product SkyPhone Pro 1 was deleted!” is visible
Click on the button
Click on the banner
This will generate an assertion that the banner is visible
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.
Open Screenshot 2025-06-23 at 10.55.40 AM.png
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 will show you how to generate UI tests for complex scenarios with Skyramp using Playwright traces. We'll demonstrate using Skyramp’s Demo Shop UI, a simple e-commerce tool 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 generate UI tests that span across multiple endpoints or services, Skyramp requires a trace to generate the test case reliably.
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. 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.
skyramp generate trace \
--playwright \
--runtime docker \
--playwright-output
Explanation of Command
--playwright: Enable Playwright to capture UI activities (default: false)--runtime: Select the environment in which the Skyramp trace collector gets deployed [Docker]
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
Find product on product list page
Edit the product
Delete the product
Let's get started!
1. Create a new product
Navigate to https://skyramp.dev/demoshop/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
Assert that the product details appear correctly
Click on the 'ab' button
Click on the name of the newly created product
This will ask you to generate an assertion that the element contains the text “SkyPhone 1”. Click the checkmark.
Repeat these steps for description, image URL, category, in stock, and price.
2. Find product on product list page
Click on “Products” at the top right of the browser
Find the product you just created
Assert that the product name and price appear correctly
Click on the button
Click on the name of the newly created product
This will ask you to generate an assertion that the element contains the text “SkyPhone 1”. Click the checkmark.
Repeat this step for price.
3. Edit the product
Click on “View Details” for the product you just created
Click on “Edit Product” at the bottom of the screen
Edit the product with new details
Click the “Save Product Details” button
Assert that the new product details appear correctly
Click on the 'ab' button
Click on the name of the newly created product
This will ask you to generate an assertion that the element contains the text “SkyPhone Pro 1”. Click the checkmark.
Repeat these steps for description, image URL, category, in stock, and price.
4. Delete the product
Click on “Delete Product” at the bottom of the screen
This should navigate you back to the products page
Assert that the red banner saying “Your product SkyPhone Pro 1 was deleted!” is visible
Click on the button
Click on the banner
This will generate an assertion that the banner is visible
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.
Open Screenshot 2025-06-23 at 10.55.40 AM.png
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
Run the following command in your terminal to generate the integration 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
Below are a few flags to customize the test generation. Additional flags are explained here.
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: Specify the test execution framework of choice.--playwright-trace: Points to the Playwright trace file.
Additional Flags
--runtime: Select the test runtime environment [Local, Docker, Kubernetes]--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.
Run the test
Run the test using Pytest. If you don’t have Pytest, install it with pip by running the following command in your terminal:
# Install dependencies
pip3 install pytest-playwright
python3 -m pytest --browser
Review Test Results
By default, Pytest provides clear and concise output indicating the success or failure of each step executed:
Each executed test will be displayed clearly in the terminal.
All encountered errors or issues will be neatly summarized for easy debugging at the end.
You can customize Pytest’s output to suit your team's preferences by following the Pytest documentation.
Test File Anatomy
Below you can find the generated test file for the example scenario:
# Generated by Skyramp v0.5.23 on 2025-06-23 10:23:58.255117 -0400 EDT m=+0.929234668
# Command: skyramp generate ui rest \
# --framework pytest \
# --language python \
# --playwright-trace ui_test_playwright.zip \
# Import of required libraries
import skyramp
import os
import time
import pytest
import re
from playwright.sync_api import Page, expect
@pytest.fixture(scope="session")
def browser_context_args(browser_context_args, playwright):
return {"ignore_https_errors": True, "service_workers": "block"}
def test_ui(page: Page):
page.goto("https://skyramp.dev/demoshop/products")
page.get_by_role("button", name="Add Product").click()
page.get_by_role("textbox", name="Product Name").click()
page.get_by_role("textbox", name="Product Name").fill("SkyPhone 1")
page.get_by_role("textbox", name="Product Name").press("Tab")
page.get_by_role("textbox", name="Description").fill("The ultimate smartphone - powered by Skyramp")
page.get_by_role("textbox", name="Description").press("Tab")
page.get_by_role("textbox", name="Image URL").fill("https://images.google.com/skyphone")
page.get_by_role("textbox", name="Image URL").press("Tab")
page.get_by_role("textbox", name="Category").fill("Phones")
page.get_by_role("textbox", name="Category").press("Tab")
page.get_by_label("In stock?Select…YesNo").select_option("true")
page.get_by_role("spinbutton", name="Price").click()
page.get_by_role("spinbutton", name="Price").fill("2023.99")
page.get_by_role("button", name="Submit").click()
expect(page.locator("#main")).to_contain_text("SkyPhone 1")
expect(page.locator("#main")).to_contain_text("The ultimate smartphone - powered by Skyramp")
expect(page.locator("#main")).to_contain_text("https://images.google.com/skyphone")
expect(page.locator("#main")).to_contain_text("Phones")
expect(page.locator("#main")).to_contain_text("$2023.99")
page.get_by_role("link", name="Products").click()
expect(page.locator("#main")).to_contain_text("SkyPhone 1")
expect(page.locator("#main")).to_contain_text("$2023.99")
page.locator(".framer-pu2j0z > .framer-text").nth(1).click()
page.get_by_role("button", name="Edit Product").click()
page.get_by_role("textbox", name="Product Name").click()
page.get_by_role("textbox", name="Product Name").fill("SkyPhone Pro 1")
page.get_by_role("textbox", name="Product Name").press("Tab")
page.get_by_role("textbox", name="Description").fill("A boosted smartphone - powered by Skyramp")
page.get_by_role("textbox", name="Description").press("Tab")
page.get_by_role("textbox", name="Image URL").fill("https://images.google.com/skyphonepro1")
page.get_by_role("textbox", name="Image URL").press("Tab")
page.get_by_role("textbox", name="Category").fill("Phone")
page.get_by_role("textbox", name="Category").press("Tab")
page.get_by_label("In stock?YesNo").press("Tab")
page.get_by_role("textbox", name="Price").fill("2025.99")
page.get_by_role("button", name="Save Product Details").click()
expect(page.locator("#main")).to_contain_text("SkyPhone Pro 1")
expect(page.locator("#main")).to_contain_text("A boosted smartphone - powered by Skyramp")
expect(page.locator("#main")).to_contain_text("https://images.google.com/skyphonepro1")
expect(page.locator("#main")).to_contain_text("Phone")
expect(page.locator("#main")).to_contain_text("Yes")
expect(page.locator("#main")).to_contain_text("$2025.99")
page.get_by_role("button", name="Delete Product").click()
expect(page.get_by_text("Your product SkyPhone Pro 1 was deleted!Dismiss")).to_be_visible()
if __name__ == "__main__":
test_ui()
Related topics
Python
Run the following command in your terminal to generate the integration 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
Below are a few flags to customize the test generation. Additional flags are explained here.
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: Specify the test execution framework of choice.--playwright-trace: Points to the Playwright trace file.
Additional Flags
--runtime: Select the test runtime environment [Local, Docker, Kubernetes]--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.
Run the test
Run the test using Pytest. If you don’t have Pytest, install it with pip by running the following command in your terminal:
# Install dependencies
pip3 install pytest-playwright
python3 -m pytest --browser
Review Test Results
By default, Pytest provides clear and concise output indicating the success or failure of each step executed:
Each executed test will be displayed clearly in the terminal.
All encountered errors or issues will be neatly summarized for easy debugging at the end.
You can customize Pytest’s output to suit your team's preferences by following the Pytest documentation.
Test File Anatomy
Below you can find the generated test file for the example scenario:
# Generated by Skyramp v0.5.23 on 2025-06-23 10:23:58.255117 -0400 EDT m=+0.929234668
# Command: skyramp generate ui rest \
# --framework pytest \
# --language python \
# --playwright-trace ui_test_playwright.zip \
# Import of required libraries
import skyramp
import os
import time
import pytest
import re
from playwright.sync_api import Page, expect
@pytest.fixture(scope="session")
def browser_context_args(browser_context_args, playwright):
return {"ignore_https_errors": True, "service_workers": "block"}
def test_ui(page: Page):
page.goto("https://skyramp.dev/demoshop/products")
page.get_by_role("button", name="Add Product").click()
page.get_by_role("textbox", name="Product Name").click()
page.get_by_role("textbox", name="Product Name").fill("SkyPhone 1")
page.get_by_role("textbox", name="Product Name").press("Tab")
page.get_by_role("textbox", name="Description").fill("The ultimate smartphone - powered by Skyramp")
page.get_by_role("textbox", name="Description").press("Tab")
page.get_by_role("textbox", name="Image URL").fill("https://images.google.com/skyphone")
page.get_by_role("textbox", name="Image URL").press("Tab")
page.get_by_role("textbox", name="Category").fill("Phones")
page.get_by_role("textbox", name="Category").press("Tab")
page.get_by_label("In stock?Select…YesNo").select_option("true")
page.get_by_role("spinbutton", name="Price").click()
page.get_by_role("spinbutton", name="Price").fill("2023.99")
page.get_by_role("button", name="Submit").click()
expect(page.locator("#main")).to_contain_text("SkyPhone 1")
expect(page.locator("#main")).to_contain_text("The ultimate smartphone - powered by Skyramp")
expect(page.locator("#main")).to_contain_text("https://images.google.com/skyphone")
expect(page.locator("#main")).to_contain_text("Phones")
expect(page.locator("#main")).to_contain_text("$2023.99")
page.get_by_role("link", name="Products").click()
expect(page.locator("#main")).to_contain_text("SkyPhone 1")
expect(page.locator("#main")).to_contain_text("$2023.99")
page.locator(".framer-pu2j0z > .framer-text").nth(1).click()
page.get_by_role("button", name="Edit Product").click()
page.get_by_role("textbox", name="Product Name").click()
page.get_by_role("textbox", name="Product Name").fill("SkyPhone Pro 1")
page.get_by_role("textbox", name="Product Name").press("Tab")
page.get_by_role("textbox", name="Description").fill("A boosted smartphone - powered by Skyramp")
page.get_by_role("textbox", name="Description").press("Tab")
page.get_by_role("textbox", name="Image URL").fill("https://images.google.com/skyphonepro1")
page.get_by_role("textbox", name="Image URL").press("Tab")
page.get_by_role("textbox", name="Category").fill("Phone")
page.get_by_role("textbox", name="Category").press("Tab")
page.get_by_label("In stock?YesNo").press("Tab")
page.get_by_role("textbox", name="Price").fill("2025.99")
page.get_by_role("button", name="Save Product Details").click()
expect(page.locator("#main")).to_contain_text("SkyPhone Pro 1")
expect(page.locator("#main")).to_contain_text("A boosted smartphone - powered by Skyramp")
expect(page.locator("#main")).to_contain_text("https://images.google.com/skyphonepro1")
expect(page.locator("#main")).to_contain_text("Phone")
expect(page.locator("#main")).to_contain_text("Yes")
expect(page.locator("#main")).to_contain_text("$2025.99")
page.get_by_role("button", name="Delete Product").click()
expect(page.get_by_text("Your product SkyPhone Pro 1 was deleted!Dismiss")).to_be_visible()
if __name__ == "__main__":
test_ui()
Related topics
Python
Run the following command in your terminal to generate the integration 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
Below are a few flags to customize the test generation. Additional flags are explained here.
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: Specify the test execution framework of choice.--playwright-trace: Points to the Playwright trace file.
Additional Flags
--runtime: Select the test runtime environment [Local, Docker, Kubernetes]--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.
Run the test
Run the test using Pytest. If you don’t have Pytest, install it with pip by running the following command in your terminal:
# Install dependencies
pip3 install pytest-playwright
python3 -m pytest --browser
Review Test Results
By default, Pytest provides clear and concise output indicating the success or failure of each step executed:
Each executed test will be displayed clearly in the terminal.
All encountered errors or issues will be neatly summarized for easy debugging at the end.
You can customize Pytest’s output to suit your team's preferences by following the Pytest documentation.
Test File Anatomy
Below you can find the generated test file for the example scenario:
# Generated by Skyramp v0.5.23 on 2025-06-23 10:23:58.255117 -0400 EDT m=+0.929234668
# Command: skyramp generate ui rest \
# --framework pytest \
# --language python \
# --playwright-trace ui_test_playwright.zip \
# Import of required libraries
import skyramp
import os
import time
import pytest
import re
from playwright.sync_api import Page, expect
@pytest.fixture(scope="session")
def browser_context_args(browser_context_args, playwright):
return {"ignore_https_errors": True, "service_workers": "block"}
def test_ui(page: Page):
page.goto("https://skyramp.dev/demoshop/products")
page.get_by_role("button", name="Add Product").click()
page.get_by_role("textbox", name="Product Name").click()
page.get_by_role("textbox", name="Product Name").fill("SkyPhone 1")
page.get_by_role("textbox", name="Product Name").press("Tab")
page.get_by_role("textbox", name="Description").fill("The ultimate smartphone - powered by Skyramp")
page.get_by_role("textbox", name="Description").press("Tab")
page.get_by_role("textbox", name="Image URL").fill("https://images.google.com/skyphone")
page.get_by_role("textbox", name="Image URL").press("Tab")
page.get_by_role("textbox", name="Category").fill("Phones")
page.get_by_role("textbox", name="Category").press("Tab")
page.get_by_label("In stock?Select…YesNo").select_option("true")
page.get_by_role("spinbutton", name="Price").click()
page.get_by_role("spinbutton", name="Price").fill("2023.99")
page.get_by_role("button", name="Submit").click()
expect(page.locator("#main")).to_contain_text("SkyPhone 1")
expect(page.locator("#main")).to_contain_text("The ultimate smartphone - powered by Skyramp")
expect(page.locator("#main")).to_contain_text("https://images.google.com/skyphone")
expect(page.locator("#main")).to_contain_text("Phones")
expect(page.locator("#main")).to_contain_text("$2023.99")
page.get_by_role("link", name="Products").click()
expect(page.locator("#main")).to_contain_text("SkyPhone 1")
expect(page.locator("#main")).to_contain_text("$2023.99")
page.locator(".framer-pu2j0z > .framer-text").nth(1).click()
page.get_by_role("button", name="Edit Product").click()
page.get_by_role("textbox", name="Product Name").click()
page.get_by_role("textbox", name="Product Name").fill("SkyPhone Pro 1")
page.get_by_role("textbox", name="Product Name").press("Tab")
page.get_by_role("textbox", name="Description").fill("A boosted smartphone - powered by Skyramp")
page.get_by_role("textbox", name="Description").press("Tab")
page.get_by_role("textbox", name="Image URL").fill("https://images.google.com/skyphonepro1")
page.get_by_role("textbox", name="Image URL").press("Tab")
page.get_by_role("textbox", name="Category").fill("Phone")
page.get_by_role("textbox", name="Category").press("Tab")
page.get_by_label("In stock?YesNo").press("Tab")
page.get_by_role("textbox", name="Price").fill("2025.99")
page.get_by_role("button", name="Save Product Details").click()
expect(page.locator("#main")).to_contain_text("SkyPhone Pro 1")
expect(page.locator("#main")).to_contain_text("A boosted smartphone - powered by Skyramp")
expect(page.locator("#main")).to_contain_text("https://images.google.com/skyphonepro1")
expect(page.locator("#main")).to_contain_text("Phone")
expect(page.locator("#main")).to_contain_text("Yes")
expect(page.locator("#main")).to_contain_text("$2025.99")
page.get_by_role("button", name="Delete Product").click()
expect(page.get_by_text("Your product SkyPhone Pro 1 was deleted!Dismiss")).to_be_visible()
if __name__ == "__main__":
test_ui()