# Test File

> Use this skill every user want to create test file.

- Skill: `venturo-id/test-file` (Agent Skill)
- Install (CLI): `npx skillmds add venturo-id/test-file`
- Raw SKILL.md: https://api.skillmd.com/api/skills/venturo-id/test-file/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: venturo-id (https://skillmd.com/u/venturo-id)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/venturo-id/test-file

---


# Test File

# General Rules
1) Do NOT generate / create any helper file, fixture file, and other, Always Remember that test file will execute on runner, So each test file must be independent; do not call helpers from other files (helpers must be inlined in the file).
2) Do NOT use `waitForTimeout` alone when a request is triggered, MUST use `page.waitForLoadState('networkidle');` followed by `page.waitForTimeout(500)`.
3) Add `page.waitForTimeout(500)` after every click action to prevent race conditions.
4) Follow this test file template:
```
// Components :
// - You must add all "Component Path" from plan markdown

import { test, expect, type Page } from '@playwright/test';

const BASE_URL = process.env.BASE_URL || 'http://localhost:5173';
const AUTH_EMAIL = process.env.AUTH_EMAIL || 'user@example.com';
const AUTH_PASSWORD = process.env.AUTH_PASSWORD || 'your-password';

// @INFO Create function mockData() to generate dynamic mock for test data. Dont add any test data into environment.
function mockData() {
    // @TODO generate mock test data here
    const name = "wahyu" + Date.now();
    return {
        name: name
    }
}

async function login(page: Page) {
  await page.goto(`${BASE_URL}/auth/login`);
  await page.waitForLoadState('networkidle');

  // @TODO(verified): Change with real selector from playwright-e2e probe
  await page.locator('input[name="email"]').fill(AUTH_EMAIL);
  await page.locator('input[name="password"]').fill(AUTH_PASSWORD);
  await page.locator('button[type="submit"]').click();

  await page.waitForLoadState('networkidle');
  await page.waitForTimeout(2000);
}

test.describe('SCN-1: User Management - View Users List', () => {
  test('SCN-1: User Management - View Users List end-to-end', async ({ page }) => {
    await login(page);

    await test.step('should display users list with correct elements', async () => {
        // @TODO Do any step and assertion
    });

    // @TODO fill with next step
  })
})
```

# Selector Rules
1) Do NOT make assumptions about selectors, You must read codebase that relate with context / scenario
2) Do NOT use `getByLabel`.
3) Do NOT use `getByText`.
4) Use semantic HTML elements such as `button`, `input`, `textarea`, `select`, `table`, `td`, `tr`, `th` and etc.
5) Preferred selectors are `data-testid` and `getByRole`.
6) All selectors must come from your snapshot.
7) **CRITICAL**: Always prioritize `[data-testid="value"]` if the component has a `playwrightId="value"` or `data-testid="value"` prop/attribute. Follow the logic in `collect-selector`.
8) Must re make sure selectors is exist using tool `evaluate` for assertion `*.toBeVisible()`