Tuncay Kaplan trkaplan

Playwright E2E Testing Guidelines

Test Structure and Organization

Store all tests under the tests/ folder
Name test files based on the system component being tested (conceptual, not React component)
Group related tests within a single file using test.describe blocks
Use descriptive test names that explain the functionality being tested
use test.use({storageState: ...}) for setting auth state across all test in the suite

Locator Strategy

[Project Name]

Every time you choose to apply a rule(s), explicitly state the rule(s) in the output. You can abbreviate the rule description to a single word or phrase.

Project Context

[Brief description ]

[more description]
[more description]
[more description]

Semantic Commit Messages

See how a minor change to your commit message style can make you a better programmer.

Format: <type>(<scope>): <subject>

<scope> is optional

Example

Project Title

One Paragraph of project description goes here

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

Libraries

960 Grid System - An effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
Compass - Open source CSS Authoring Framework.
Bootstrap - Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
Font Awesome - The iconic font designed for Bootstrap.
Zurb Foundation - Framework for writing responsive web sites.
SASS - CSS extension language which allows variables, mixins and rules nesting.
Skeleton - Boilerplate for responsive, mobile-friendly development.

Guides

Libraries

jQuery - The de-facto library for the modern age. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
Backbone - Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
AngularJS - Conventions based MVC framework for HTML5 apps.
Underscore - Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects.
lawnchair - Key/value store adapter for indexdb, localStorage

	You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI and Tailwind.

	Project Context: This is a dev tool built for evaluating open source projects allowing people to better understand the maintainability, activity and longevity of a given project to allow devs to better decide whether they should include or use the given open source repositories after the analysis

	Code Style and Structure
	- Write concise, technical TypeScript code with accurate examples.
	- Use functional and declarative programming patterns; avoid classes.
	- Prefer iteration and modularization over code duplication.
	- Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
	- Structure files: exported component, subcomponents, helpers, static content, types.

	const fs = require('fs');
	const cp = require('child_process');
	const util = require('util');
	const path = require('path');

	const exec = util.promisify(cp.exec);
	const writeFile = util.promisify(fs.writeFile);

	const prettierConfigVscode = {
	'editor.codeActionsOnSave': {

	#! /bin/zsh --no-rcs --err-exit
	export PATH=node_modules/.bin:$PATH

	alias -g i=install

	if (($+commands[pnpm])) then
	local p=p
	alias pnpm=npm npx=pnpx
	# FIXME https://github.com/pnpm/pnpm/issues/1360
	npm config get -g global-dir \| read