Agent skill
login-flows
Common login automation patterns for web apps using Playwright
Install this agent skill to your Project
npx add-skill https://github.com/andrewyng/context-hub/tree/main/content/playwright-community/skills/login-flows
Metadata
Additional technical details for this skill
- tags
- browser,automation,playwright,login,testing
- source
- community
- updated on
- 2026-02-01
SKILL.md
Login Flow Patterns for Playwright
Reusable patterns for automating login flows in end-to-end tests.
Basic Username/Password Login
import { Page } from '@playwright/test';
async function login(page: Page, username: string, password: string) {
await page.goto('/login');
await page.fill('[name="username"]', username);
await page.fill('[name="password"]', password);
await page.click('button[type="submit"]');
await page.waitForURL('/dashboard');
}
OAuth / SSO Login
For OAuth flows that redirect to an external provider:
async function loginWithOAuth(page: Page) {
await page.goto('/login');
await page.click('text=Sign in with Google');
// Handle the OAuth popup or redirect
await page.fill('input[type="email"]', process.env.TEST_EMAIL!);
await page.click('text=Next');
await page.fill('input[type="password"]', process.env.TEST_PASSWORD!);
await page.click('text=Next');
// Wait for redirect back to app
await page.waitForURL('**/dashboard');
}
Persisting Auth State (storageState)
Avoid logging in before every test by saving and reusing browser state:
// global-setup.ts — runs once before all tests
import { chromium } from '@playwright/test';
async function globalSetup() {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('/login');
await page.fill('[name="username"]', 'testuser');
await page.fill('[name="password"]', 'testpass');
await page.click('button[type="submit"]');
await page.waitForURL('/dashboard');
// Save signed-in state
await page.context().storageState({ path: './auth.json' });
await browser.close();
}
export default globalSetup;
Then in playwright.config.ts:
export default defineConfig({
globalSetup: './global-setup.ts',
use: {
storageState: './auth.json',
},
});
MFA / 2FA Handling
For test environments with TOTP-based 2FA:
import { authenticator } from 'otplib';
async function loginWithMFA(page: Page, secret: string) {
await login(page, 'user', 'pass');
// Generate TOTP code
const code = authenticator.generate(secret);
await page.fill('[name="totp"]', code);
await page.click('button[type="submit"]');
await page.waitForURL('/dashboard');
}
Tips
- Always use
storageStateto avoid repeated logins — it's the single biggest speedup for E2E suites - Use environment variables for credentials, never hardcode them
- For CI, consider a dedicated test user with stable credentials
- Use
page.waitForURL()instead of arbitrarywaitForTimeout()after login
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
document-extraction
Use this skill for intelligent document processing and content extraction using LandingAI's Agentic Document Extraction (ADE). Trigger when users need to (1) Parse documents (PDFs, images, spreadsheets, presentations) into structured Markdown with layout understanding, (2) Extract specific structured data from documents using schemas (invoice fields, form data, table data, etc.), (3) Classify and separate multi-document batches by type (invoices vs receipts, statements vs forms, etc.), (4) Process large documents asynchronously (up to 1GB/1000 pages), (5) Get visual grounding (bounding boxes, page numbers) for extracted content — use when users mention bounding boxes, word locations, grounding, highlighting extracted content, or showing where data appears in a document. Use this skill when the task involves understanding document content for a set of documents. In particular this skill can help you write code that run on sets of documents. This will increase speed, and reduce the cost of loading the documents on the Agent context window because you can use a single script to extract the information needed.
document-workflows
Use this skill for building end-to-end document processing workflows and pipelines using LandingAI ADE. Trigger when users need to: (1) Process batches of documents in parallel or async, (2) Build classify-then-extract pipelines for mixed document types, (3) Prepare parsed documents for RAG systems with chunking and vector DB ingestion, (4) Load extraction results into databases like Snowflake or export to CSV/DataFrames, (5) Visualize extraction results: draw bounding box overlays on pages, crop chunk images, or highlight/annotate specific words or phrases found in documents, (6) Build Streamlit or web UIs for document processing, (7) Find and highlight specific terms within document sections using word-level grounding (e.g. highlight "L2S" in the Introduction, redact PII, annotate extracted values on the original page). This skill complements the document-extraction skill which covers ADE SDK basics. Use document-extraction to write code that executes parse/extract/split operations with more precision and less cost than adding the document image to the prompt and asking the LLM to find the relevant info. Use document-workflows when composing those operations into pipelines, or when you need visualization, annotation, or word-level grounding on parsed documents.
new-project
Build a new AI agent with Olakai monitoring from scratch — project setup, SDK integration, KPI configuration, and end-to-end validation
integrate
Add Olakai monitoring to existing AI code — wrap your LLM client, configure custom KPIs, and validate the integration end-to-end
tavily-best-practices
Build production-ready Tavily integrations with best practices for web search, content extraction, crawling, and research in agentic workflows, RAG systems, and autonomous agents
electronics-sourcing
Guide for AI agents to source electronic components using parts-mcp — tool sequencing, decision patterns, and multi-step workflows
Didn't find tool you were looking for?