Generate Text File

Type custom text into a textarea, generate a .txt file, download it, and validate both filename and downloaded content.

Intermediate

Scenario

Client-generated files appear in export builders, bug report tools, and admin utilities. The real risk is stale or mismatched content.

Text content

Generated file not downloaded yet.

Live widget · interact freely

Manual test checklist

1Edit the textarea with unique text
2Click Generate file
3Confirm a .txt download starts
4Open the file and verify the content matches the textarea
5Generate again with changed text and confirm the second file updates

Expected result

The generated file downloads as generated-qa-notes.txt and contains exactly the textarea content submitted by the tester.

Automation challenge

Fill `generated-text-input`, wait for the download event, save the file, and assert the saved content includes the exact generated line.

Stable selectors

Textarea input[data-testid="generated-text-input"]
Generate file button[data-testid="generate-text-download"]
Generated result[data-testid="generated-text-result"]

Locator strategy

Three levels from simple IDs to scoped Playwright locators. IDs and names are easy to learn but are not always the best long-term choice when labels change or components repeat.

Use simple IDs and names to understand how locating elements works.

1
2
3

await page.goto('https://lab.hakdogan.com/practice/generate-text-file');

await page.locator('#generated-file-text').fill('QA notes');

Avoid as primary strategies

XPath (unless there is no alternative), long CSS chains, Tailwind-style utility class selectors, generated or unstable IDs, and volatile framework internals break when layout, styling, or DOM structure shifts.

1
2

await page.locator('.w-full.rounded-xl.border.bg-blue-500').fill('demo@example.com');
await page.locator('//div[2]/form/div[1]/input').fill('demo@example.com');

Reference Playwright spec

generate-text-file.spec.ts

import { test, expect } from '@playwright/test';
import { readFile } from 'node:fs/promises';

test('generated text file contains textarea content', async ({ page }, testInfo) => {
  await page.goto('https://lab.hakdogan.com/practice/generate-text-file');

  const content = 'QA generated note ' + Date.now();
  await page.getByTestId('generated-text-input').fill(content);

  const downloadPromise = page.waitForEvent('download');
  await page.getByTestId('generate-text-download').click();
  const download = await downloadPromise;

  expect(download.suggestedFilename()).toBe('generated-qa-notes.txt');
  const target = testInfo.outputPath(download.suggestedFilename());
  await download.saveAs(target);
  expect(await readFile(target, 'utf8')).toContain(content);
});

Headed Test Playback

Simulated headed-browser flow — no real browser is launched.

Automation-style playback (Playwright-shaped logs). No real browser; no commands run on your machine.

Idlegenerate-text-file.spec.ts

Failure demos

https://lab.hakdogan.com/practice/generate-text-file

playwright · headed · chromium0.00s

# awaiting Run Test · terminal scrolls automatically

Steps

Filling generated content
Clicking generate file
Saving text artifact
Asserting downloaded content