{"id":19122169,"url":"https://github.com/hrmeetsingh/playwright-layout-testing","last_synced_at":"2025-07-18T14:39:52.732Z","repository":{"id":247140539,"uuid":"822776948","full_name":"hrmeetsingh/playwright-layout-testing","owner":"hrmeetsingh","description":"Page layout testing example (non visual)","archived":false,"fork":false,"pushed_at":"2024-08-07T01:17:41.000Z","size":15,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-03T08:31:19.769Z","etag":null,"topics":["end-to-end-testing","layout-testing","playwright","playwright-demo","playwright-test","playwright-typescript","testing-framework"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hrmeetsingh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-01T19:55:17.000Z","updated_at":"2024-08-14T17:53:40.000Z","dependencies_parsed_at":"2025-01-03T08:27:41.325Z","dependency_job_id":"ddb487b5-db0c-40b0-a482-cf70263c99a5","html_url":"https://github.com/hrmeetsingh/playwright-layout-testing","commit_stats":null,"previous_names":["hrmeetsingh/playwright-layout-testing"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hrmeetsingh%2Fplaywright-layout-testing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hrmeetsingh%2Fplaywright-layout-testing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hrmeetsingh%2Fplaywright-layout-testing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hrmeetsingh%2Fplaywright-layout-testing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hrmeetsingh","download_url":"https://codeload.github.com/hrmeetsingh/playwright-layout-testing/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240177302,"owners_count":19760346,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["end-to-end-testing","layout-testing","playwright","playwright-demo","playwright-test","playwright-typescript","testing-framework"],"created_at":"2024-11-09T05:20:03.804Z","updated_at":"2025-07-18T14:39:52.718Z","avatar_url":"https://github.com/hrmeetsingh.png","language":"TypeScript","readme":"# Playwright Layout Testing\n\nA TypeScript project that extends [Playwright](https://playwright.dev/) with custom layout assertions for robust UI layout testing. This project provides custom matchers to verify the spatial relationships between elements, such as whether one element is left of or above another, including alignment options.\n\n## Features\n\n- **Custom Matchers:**\n  - `toBeLeftOf`: Assert that one element is to the left of another, with optional horizontal alignment checks.\n  - `toBeAbove`: Assert that one element is above another, with optional vertical alignment checks.\n- **Reusable Page Objects:** Example page objects for robust and maintainable tests.\n- **Parallel Cross-Browser Testing:** Leverages Playwright’s configuration for Chromium, Firefox, and WebKit.\n- **HTML Reporting:** Generates visual reports for test runs.\n\n## Installation\n\n1. Clone the repository:\n   ```sh\n   git clone https://github.com/hrmeetsingh/playwright-layout-testing.git\n   cd playwright-layout-testing\n   ```\n2. Install dependencies:\n   ```sh\n   npm install\n   ```\n\n## Project Structure\n\n- `tests/`: Contains test specs using the custom layout matchers.\n- `fixtures/layout-matchers/`: Implementation of custom matchers (`toBeLeftOf`, `toBeAbove`).\n- `pages/`: Page object models for test abstraction.\n- `playwright.config.ts`: Playwright configuration (browsers, reporters, etc).\n\n## Usage\n\nRun all tests:\n```sh\nnpx playwright test\n```\n\nView the HTML test report:\n```sh\nnpx playwright show-report\n```\n\n## Writing Layout Tests\n\nImport the custom test and expect from `fixtures/layout-matchers`:\n\n```typescript\nimport { test, expect } from \"../fixtures/layout-matchers\";\n\n// Example usage\ntest(\"Element is left of another\", async ({ page }) =\u003e {\n  await expect(locatorA).toBeLeftOf(locatorB);\n});\n\ntest(\"Element is above another with alignment\", async ({ page }) =\u003e {\n  await expect(locatorA).toBeAbove(locatorB, { allSide: true, left: true });\n});\n```\n\n## Custom Matchers API\n\n### `toBeLeftOf`\n```typescript\nawait expect(locatorA).toBeLeftOf(locatorB, { allSide?: boolean, top?: boolean }, options?);\n```\n- `allSide`: If true, checks both top and bottom alignment.\n- `top`: If true, checks top edge alignment.\n\n### `toBeAbove`\n```typescript\nawait expect(locatorA).toBeAbove(locatorB, { allSide?: boolean, left?: boolean }, options?);\n```\n- `allSide`: If true, checks both left and right alignment.\n- `left`: If true, checks left edge alignment.\n\n## Example\n\nSee [`tests/pageLayout.spec.ts`](./tests/pageLayout.spec.ts) for usage examples.\n\n## License\n\nMIT\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhrmeetsingh%2Fplaywright-layout-testing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhrmeetsingh%2Fplaywright-layout-testing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhrmeetsingh%2Fplaywright-layout-testing/lists"}