Menu
Guide for writing end to end tests using plawright. Use this when asked to write an end-to-end-test.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
How map movement, state, and geolocation work. Use this when modifying the map, its position/zoom, URL sync, or geolocation behaviour.
Official integration patterns for Mapbox GL JS across popular web frameworks (React, Vue, Svelte, Angular). Covers setup, lifecycle management, token handling, search integration, and common pitfalls. Based on Mapbox's create-web-app scaffolding tool.
Performance optimization patterns for Mapbox GL JS web applications. Covers initialization waterfalls, bundle size, rendering performance, memory management, and web optimization. Prioritized by impact on user experience.
Basé sur la classification professionnelle SOC
| name | writing-e2e-tests |
| description | Guide for writing end to end tests using plawright. Use this when asked to write an end-to-end-test. |
Dies ist das Frontend für Wheelmap.org, eine Plattform zur Erfassung der Barrierefreiheit von öffentlichen Orten. Stack: Next.js 14, React 18, TypeScript, Playwright, Mapbox GL.
e2e/ Verzeichnis)pnpm test oder pnpm exec playwright testnpx playwright show-reportnpx playwright test --debugnpx playwright test e2e/dateiname.spec.tsnpx playwright test --project=chromiumCI_TEST_DEPLOYMENT_BASE_URL oder TEST_DEPLOYMENT_BASE_URLretain-on-failure)// Standard-Import
import { test, expect } from './lib/axe-test'; // Inkludiert Accessibility-Testing
import getBaseURL from './lib/base-url';
import { skipOnboarding } from './skipOnboarding';
// Test-Setup
test.beforeEach(async ({ page }) => {
await page.goto(baseURL);
await skipOnboarding(page);
});
// Test schreiben
test('beschreibung', async ({ page }) => {
// Playwright-Selektoren bevorzugen: page.getByRole() > page.locator()
await expect(page.getByRole('button', { name: 'Submit' })).toBeVisible();
});
page.getByRole() mit ARIA-Labels bevorzugen - nie page.locator()!page.waitForLoadState() nach NavigationskipOnMobiles() / skipOnDesktops() aus ./lib/device-typemakeAxeBuilder() Fixture für automatisierte Accessibility-Checkse2e/test-data//buildings/way:23517902nodes/vnDZSz73newE2WmnJnodes/385610010612003215733659311213356985075012beta - Neue Branches normalerweise von beta abzweigen... (Asana #TASK_GID)https://app.asana.com/0/PROJECT_GID/TASK_GID → GitHub-Asana Integration zeigt PR als Kartemcp_asana_asana_update_taskhttps://github.com/sozialhelden/wheelmap-frontend/pull/123# Workspaces auflisten
mcp_asana_asana_list_workspaces
# Tasks in Projekt suchen
mcp_asana_asana_search_tasks workspace_gid="1200321573365931" project_gid="1213356985075012"
# Task Details abrufen
mcp_asana_asana_get_task task_gid="TASK_GID"
# Task aktualisieren
mcp_asana_asana_update_task task_gid="TASK_GID" opt_fields="..."
pnpm install
pnpm dev
# App läuft unter http://localhost:3000
pnpm lint # ESLint + Next.js Lint
pnpm format # Code formatieren
pnpm transifex:push # Neue Strings zu Transifex pushen
.module.css oder SCSSsrc/components/icons/