Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 68 additions & 0 deletions docs/automation/pom-login-example.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
# POM: Reusable Login Module

On this example we will create a robust, reusable login module that Wopee.io can reference without re-analysis. This guide shows you how to build, register, and use login components efficiently.

## pages/LoginPage.ts

```typescript
import { Page, Locator, expect } from "@playwright/test";

export class LoginPage {
readonly page: Page;
readonly usernameInput: Locator;
readonly passwordInput: Locator;
readonly loginButton: Locator;
readonly errorMessage: Locator;
readonly forgotPasswordLink: Locator;

constructor(page: Page) {
this.page = page;
this.usernameInput = page.locator('[data-testid="username-input"]');
this.passwordInput = page.locator('[data-testid="password-input"]');
this.loginButton = page.locator('[data-testid="login-button"]');
this.errorMessage = page.locator('[data-testid="error-message"]');
this.forgotPasswordLink = page.locator('[data-testid="forgot-password"]');
}

async goto() {
await this.page.goto("/login");
await this.page.waitForLoadState("networkidle");
}

async login(username: string, password: string) {
await this.usernameInput.fill(username);
await this.passwordInput.fill(password);
await this.loginButton.click();

// Wait for navigation or success indicator
await this.page.waitForURL("**/dashboard", { timeout: 10000 });
}

async loginWithInvalidCredentials(username: string, password: string) {
await this.usernameInput.fill(username);
await this.passwordInput.fill(password);
await this.loginButton.click();

// Wait for error message
await this.errorMessage.waitFor({ state: "visible" });
}

async getErrorMessage() {
return await this.errorMessage.textContent();
}

async isLoggedIn() {
// Check for dashboard URL or authenticated user indicator
return (
this.page.url().includes("/dashboard") ||
(await this.page.locator('[data-testid="user-menu"]').isVisible())
);
}

async logout() {
await this.page.locator('[data-testid="user-menu"]').click();
await this.page.locator('[data-testid="logout-button"]').click();
await this.page.waitForURL("**/login");
}
}
```
115 changes: 115 additions & 0 deletions docs/concepts/analysis-inputs.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
# Analysis - Inputs

First go to strategy for test analysis is to use our AI Testing Agent to analyze the application and generate test cases. Apart from crawling, you can also use Jira stories, Figma designs, or any other artifact to generate test cases. Actually, this is a more efficient way to generate test cases, because the AI Testing Agent can use only information from your crawling instruction / prompt and context from collected screenshots and HTML.

## Input Types which will improve quality of your test analysis

### 1. Jira Stories

- **User Stories** - Business requirements and acceptance criteria
- **Bug Reports** - Defect descriptions and reproduction steps
- **Feature Requests** - New functionality specifications
- **Epics** - High-level feature groupings

### 2. Figma Designs

- **UI Mockups** - Visual design specifications
- **Prototypes** - Interactive design flows
- **Design Systems** - Component libraries and patterns
- **Wireframes** - Low-fidelity layout concepts

### 3. Draft Test Cases

- **Manual Test Scripts** - Existing test documentation
- **Test Plans** - Testing strategy documents
- **Bug Reports** - Known issues and edge cases
- **Requirements Documents** - Business specifications

## Examples

### Jira Story Example

**Example Jira Story**:

```
Title: User can send secure messages
Description: As a user, I want to send secure messages to other users so that I can communicate privately.

Acceptance Criteria:
- User can compose a new message
- User can select recipients from contact list
- User can attach files up to 10MB
- User can mark message as urgent
- User receives confirmation when message is sent
- User can view sent message in outbox

Technical Notes:
- Messages are encrypted end-to-end
- File upload supports: PDF, DOC, JPG, PNG
- Maximum 5 recipients per message
```

Step 1: Add an user story:

![Add an user story](../../img/concepts/analysis-inputs/add-user-story.png)

Step 2: Prompt for user story:

![Prompt for user story](../../img/concepts/analysis-inputs/prompt-user-story.png)

Step 3: Test case generated:

![Test case generated](../../img/concepts/analysis-inputs/tests-generated.png)

### Figma Frame Example

**Upload Requirements**:

- **Format**: Export your Figma frame as PNG, JPG
- **Context**: Include relevant UI states (empty, filled, error)
- **Instructions**: Add all important information for complex interactions into instructions.

### Draft Test Case Example

**Example Test Case Example**:

```
Test Case: TC-001 - User can compose a new message
Preconditions: User is logged in
Steps:
1. Navigate to Messages page
2. Click "Compose" button
3. Fill recipient field with "recipient@example.com"
4. Enter subject line
5. Type message body
6. Click "Send" button
7. Verify message is sent successfully
Expected Result: Message is sent successfully and is visible in outbox
```

## Artifact Mapping Table

| Artifact Type | What Wopee Extracts | Affects User Stories | Affects Tests |
| -------------------- | --------------------------------------------------------- | --------------------------- | ------------------------------ |
| **Jira Story** | Title, description, acceptance criteria, labels, priority | ✅ Creates/updates stories | ✅ Generates test scenarios |
| **Figma Design** | UI elements, interactions, states, design tokens | ✅ Adds visual context | ✅ Creates visual tests |
| **Draft Test Case** | Steps, expected results, preconditions | ✅ Validates requirements | ✅ Generates test code |
| **Bug Report** | Issue description, steps to reproduce | ✅ Creates regression tests | ✅ Generates negative tests |
| **Requirements Doc** | Business rules, constraints, workflows | ✅ Creates user stories | ✅ Generates integration tests |

## Best Practices

### ✅ Do

- **Provide context** - Add descriptions to all artifacts
- **Use consistent naming** - Standardize artifact IDs
- **Include multiple states** - Upload different UI states
- **Validate extracted data** - Review what Wopee.io extracts
- **Update artifacts** - Keep inputs current with application changes

### ❌ Don't

- **Upload outdated designs** - Ensure artifacts match current state
- **Skip validation** - Always review generated output
- **Ignore conflicts** - Resolve contradictions between sources
- **Forget versioning** - Track changes to artifacts over time
5 changes: 2 additions & 3 deletions docs/analysis.md → docs/concepts/analysis-process.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ Below is a step-by-step overview of how your application is analyzed and how you

## New Analysis

![](img/analysis/2025-04-16_04-39.png)
![New analysis](../../img/analysis/2025-04-16_04-39.png)

Before starting the analysis, you can tailor how source data is collected and provide specific instructions for the crawler:

Expand All @@ -25,7 +25,6 @@ Before starting the analysis, you can tailor how source data is collected and pr

Once you’ve configured these options, you can start the analysis or cancel to return to the previous screen.


## 1. Collecting Input Data

**What Happens:**
Expand Down Expand Up @@ -99,4 +98,4 @@ Well-structured tests lead to dependable and actionable results.
- ▶️ **Run Tests:** Execute tests immediately to validate functionality.
- 💾 **Save to Git:** Store finalized scenarios and code in your connected Git repository.
- ➕ **Add New:** Create additional user stories or test cases as needed.
- 🔄 **Regenerate:** Refresh scenarios or code based on new instructions.
- 🔄 **Regenerate:** Refresh scenarios or code based on new instructions.
Loading