Browse

Automation Testing .cursorrules strategies

Filters

Tech

Clear

React

Tailwind CSS

Node.js

Tailwind

JavaScript

Shadcn UI

Next.js

Radix UI

Python

WebP

Zod

JSX

Vite

CSS

Supabase

HTML

Jest

Next.js App Router

PostgreSQL

Docker

Redis

Pydantic

Tailwind Aria

TailwindCSS

FastAPI

Git

ESLint

pytest

react-hook-form

Solidity

Vercel

JSDoc

GitHub Actions

Typescript

Prettier

Suspense

Vitest

ARIA

Zustand

React Testing Library

Celery

Radix

Shadcn

SQLAlchemy

PHP

SvelteKit

JSON

Vue.js

Pinia

MongoDB

tRPC

Clerk

Expo

PEP 8

SSR

Prisma

dotenv

GitLab CI

SQLite

SQL

Playwright

tanStackQuery

DaisyUI

Laravel

RESTful API

Drizzle ORM

VueUse

Express

asyncpg

TypeScript

scikit-learn

pandas

GitHub

RabbitMQ

Rust

Java

GraphQL

Svelte

Elixir

ES6

Nuxt 3

styled-components

Vue Router

Astro

Svelte 5

Markdown

OpenZeppelin

Drizzle

Stripe

Flexbox

CORS

Lighthouse

JWT

Swagger

aiomysql

Ruff

Langchain

Django

matplotlib

Clear

Database Design

Deployment and Scaling

Personal Website

Minimalist Design

3D Graphics

Entrepreneurship

Design System

Laravel development

TALL stack

Alpine.js integration

Laravel 11 changes

Livewire components

Contract Development

Decentralized Applications (DApps)

Coding

Nuxt-specific Guidelines

Formatting

UI

Composition API

Key Conventions

ES6

Bun

GraphQL

Unix Philosophy

Behavior-Driven Development

Data Engineering

JavaScript Code Style

Static Generation

Async/Await

React Functional Components

JavaScript ES6

component libraries

frontend development

database integration

code maintainability

Async Ecosystem

Rust Best Practices

Concurrency

TypeScript coding standards

Web development

Error handling and validation

React best practices

Programming principles

AI Modeling

Village Simulation

Data Structures and Algorithms

Programming Paradigms

Prompting Guidance

AI Behavior Guidelines

Styling Guidelines

Web Scraping

Data Extraction

Software Best Practices

Mobile Development

Component Libraries

Software development

Code best practices

Debugging and Troubleshooting

Material UI Usage

iterative refinement

full-stack development

authentication

system thinking

clean code practices

data fetching

testing and documentation

User-Friendly Tools

README Generator

Software Projects

data science

software testing

command line applications

JavaScript naming conventions

Programming best practices

Code Improvement

Data Analysis

Medical Imaging

Code Reproducibility

document authoring

asynchronous operations

serverless architecture

Adobe Edge Delivery Services

accessibility

lazy loading

responsive design

GitHub integration

spreadsheet integration

semantic HTML

block-based development

metadata handling

content management

Cross-Platform Development

Scripting

Software Documentation

Programming Languages

Cross-platform applications

Schema validation

Monorepo management

Mobile development

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

NEW

Playwright Test TypeScript .cursorrules prompt file

Playwright Testing - Best Practices

Always use TypeScript instead of vanilla JavaScript whenever possible.
For locators, always bias towards using Playwright's getByTestId() locator method instead of any other method.
Add a data-testid attribute for elements you need to target if they don't already have a data-testid attribute.
Every data-testid should follow this format: ComponentName_camelCaseDescriptorOfElement
Save any locator to a variable before using it in a test. Examples:
DO:
```typescript
const exampleSignInButton = page.getByTestId("ExampleButton_signIn");
await exampleSignInButton.click();
```
DON'T:
```typescript
await page.getByTestId("ExampleButton_signIn").click();
```
If logic is being reused in multiple tests, recommend creating a reusable helper/utility function to share this logic across tests. a. If a helper function is created to follow the DRY principle, don't require more arguments in the function than are needed to share the logic. b. Never assert anything in a helper function. Helper functions are reserved for performing a series of user actions, not testing the outcome of those actions.
Whenever possible, use Playwright's built-in features, methods, and utilities instead of "reinventing the wheel" with raw JavaScript or TypeScript solutions to solved problems. Examples:
DO:
```typescript
await expect(async () => {
await radioButton.click(); // locator defined outside this block
await expect(radioButton).toBeChecked();
}).toPass();
```
DON'T:
```typescript
export async function radioButtonGroupClick(
page: Page,
urlToWaitFor: string, // The URL where the radio button is
radioButton: Locator,
errorTextTrigger: Locator // A button you can click that will throw error text if the radio button wasn't clicked
) {
await page.waitForURL(urlToWaitFor);
let iterationCounter = 0;
let errorTextIsVisible = await page.getByTestId("ErrorText").isVisible();
let buttonWasClicked = await radioButton.isChecked();
while (errorTextIsVisible || !buttonWasClicked) {
if (iterationCounter === 5) {
break;
} else {
iterationCounter++;
}
await radioButton.click();
buttonWasClicked = await radioButton.isChecked();
if (buttonWasClicked) {
await errorTextTrigger.click();
errorTextIsVisible = await page.getByTestId("ErrorText").isVisible();
}
}
}
```
The entry point to Playwright's documentation is here if you need to look available features: https://playwright.dev/docs/intro.
When doing so follows the other rules in this file, try to write tests similar to other existing tests in the Playwright suite. The Playwright suite consists of everything within the test/playwright directory.
Never use .not.toBeVisible() or .toBeHidden(). Instead of these, use our custom matcher .toNotExist().