AI E2E Test Generation on Playwright: Description & Implementation

Why writing E2E tests is a headache?

End-to-end tests are considered the gold standard for UI verification, but maintaining them wears teams out. Typical scenario: a test fails even though the functionality works. The reason is fragile locators like div.container > ul > li:nth-child(3) > a. Any layout change breaks dozens of tests. In our practice, we've seen projects where 35% of E2E tests were flaky – failing in 15–40% of runs. Each such false fail wastes time on investigation, undermines trust in automation, and slows down the release cycle.

Our AI generator solves this: it creates Playwright tests with semantic locators (aria-label, data-testid, role) that are resilient to cosmetic changes. Additionally, the neural network can fix existing flaky tests – it analyzes errors and adds proper expectations.

What are flaky tests and why do they occur?

A flaky test is one that can fail without any code changes. Main causes: race conditions (missing wait for async data loading), animations, dependency on time or execution order. According to Flaky Tests at Google and How We Address Them, in large projects up to 16% of tests are flaky. We've seen projects where this figure reached 40%.

How does the AI generator solve the flaky test problem?

Our approach is based on large language models (GPT-4o, Claude 3.5) and includes several methods for generation and stabilization.

Generating Playwright tests from scenario descriptions

The user describes a scenario in Russian or English, provides a URL and test data. The AI transforms this into TypeScript code with semantic locators. Example:

from langchain_openai import ChatOpenAI from playwright.sync_api import sync_playwright import json class E2ETestGenerator: PLAYWRIGHT_PROMPT = """Create a Playwright E2E test in TypeScript. Scenario: {scenario} Application URL: {base_url} Test data: {test_data} Test requirements: 1. Use semantic locators: getByRole, getByLabel, getByText, getByTestId 2. Do NOT use CSS selectors like .class or #id (except data-testid) 3. Add explicit waits: await expect(locator).toBeVisible() 4. For forms: fill via getByLabel(), not via selectors 5. Check after every significant action (not only at the end) 6. Use page.waitForResponse() for ajax operations 7. Structure: test.describe > test.beforeEach > test Example of a good locator: ✅ page.getByRole('button', {{ name: 'Create order' }}) ✅ page.getByTestId('checkout-submit-btn') ❌ page.locator('button.btn-primary:nth-child(2)') Return TypeScript test code.""" def __init__(self): self.llm = ChatOpenAI(model="gpt-4o", temperature=0.1) def generate_from_scenario( self, scenario: str, base_url: str, test_data: dict ) -> str: result = self.llm.invoke( self.PLAYWRIGHT_PROMPT.format( scenario=scenario, base_url=base_url, test_data=json.dumps(test_data, ensure_ascii=False) ) ) return result.content def generate_from_recording(self, playwright_trace: str) -> str: """Improves an automatically recorded Playwright test from Codegen""" prompt = f"""Improve the automatically recorded Playwright test. Original test (from Codegen): ```typescript {playwright_trace} 

Problems in Codegen tests to fix:

1. Replace fragile CSS selectors with semantic locators
2. Add explicit waits instead of implicit ones
3. Extract test data into variables
4. Add state checks (expect) after key actions
5. Break into logical steps with comments

Return the improved test.""" return self.llm.invoke(prompt).content

 ### Screenshot-to-Test: generation from a screenshot If you have a UI but no documentation, the AI analyzes a screenshot and creates a test. This is useful for reverse-engineering legacy systems. <details> <summary>Example of generation from a screenshot</summary> We use GPT-4o to analyze the image. The model recognizes UI elements and generates a test with up to 95% accuracy. </details> ```python import base64 from openai import OpenAI client = OpenAI() def generate_test_from_screenshot(image_path: str, scenario: str) -> str: with open(image_path, "rb") as f: image_b64 = base64.b64encode(f.read()).decode() response = client.chat.completions.create( model="gpt-4o", messages=[{ "role": "user", "content": [ {"type": "image_url", "image_url": {"url": f"data:image/png;base64,{image_b64}"}}, {"type": "text", "text": f"""Create a Playwright test for this UI. Scenario: {scenario} Describe what you see in the screenshot: the form, buttons, fields. Then create a TypeScript Playwright test with semantic locators. Use getByRole, getByLabel, getByText – not CSS classes."""} ] }] ) return response.choices[0].message.content 

Automatic Page Object Model generation

Tests generated "on the fly" are convenient, but for large-scale projects, structure is needed. The AI itself suggests a Page Object – splits the page into logical blocks and creates a class with methods.

 PAGE_OBJECT_PROMPT = """Create a Page Object Model (POM) class for a page. Page description / screenshot: {page_description} URL: {url} POM requirements: - All interactive elements as class properties - Methods for main actions (not getters for every button) - Methods return Promise<void> or Promise<ResultType> - Use semantic locators - Add a waitForLoad() method Structure: ```typescript export class CheckoutPage {{ readonly page: Page; readonly submitButton: Locator; // ... async fillOrderForm(data: OrderData): Promise<void> {{ // ... }} async submit(): Promise<OrderConfirmationPage> {{ // ... }} }} 

Return TypeScript POM code."""

def generate_page_object(self, page_description: str, url: str) -> str: result = self.llm.invoke( self.PAGE_OBJECT_PROMPT.format( page_description=page_description, url=url ) ) return result.content 

 ### Fixing flaky tests A separate module analyzes failure logs and automatically adds waits, replaces unstable locators, fixes race conditions. ```python class FlakyTestFixer: FLAKY_FIX_PROMPT = """Fix a flaky Playwright test. Test: {test_code} Errors from the last 5 runs: {error_log} Typical flakiness causes: 1. Race condition: no wait after async action 2. Animations: element is visible but not immediately clickable 3. Network requests: no waitForResponse 4. Date/time: test depends on current time 5. Test order: global state Add: - await page.waitForLoadState('networkidle') after navigation - await expect(element).toBeEnabled() before click - page.waitForResponse() for ajax - Fixed test time via page.clock.setFixedTime() Return the fixed test.""" def fix_flaky_test(self, test_code: str, error_log: str) -> str: return self.llm.invoke( self.FLAKY_FIX_PROMPT.format(test_code=test_code, error_log=error_log) ).content 

How we implement AI test generation?

The process is broken into stages, each delivering a measurable outcome.

Average timeline for a project with 10 critical scenarios: 4–6 weeks turnkey.

What is included in the result?

We guarantee: flaky rate will not exceed 5% after implementation. If exceeded, we fix it free of charge.

Results: comparison before and after AI

QA budget savings – up to 50% per month.

Why trust us with this task?

Our team has 10+ years of experience in test automation and 4+ years in AI/ML. We have implemented E2E generation in fintech, e-commerce, and SaaS – over 30 projects in total. All engineers are certified in Playwright and have experience with LLMs. We guarantee stable results and transparency: you see every generated test and can adjust it.

How to get started?

Order a pilot: we will analyze 3–5 of your scenarios, generate tests, and show results. We estimate timeline and cost within 24 hours after reviewing your project. Get a consultation – contact us directly.