{"id":20739872,"url":"https://github.com/ecureuill/saucedemo-playwright","last_synced_at":"2025-04-14T11:11:23.610Z","repository":{"id":210446808,"uuid":"726585841","full_name":"ecureuill/saucedemo-playwright","owner":"ecureuill","description":"E2E testing project for saucedemo.com using Playwright ","archived":false,"fork":false,"pushed_at":"2023-12-06T00:42:00.000Z","size":64683,"stargazers_count":10,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-18T01:42:41.046Z","etag":null,"topics":["e2e","e2e-tests","end-to-end","page-object","playwright","saucedemo","test","test-automation","typescript","ui-test"],"latest_commit_sha":null,"homepage":"https://ecureuill.github.io/saucedemo-playwright/","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/ecureuill.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}},"created_at":"2023-12-02T19:47:26.000Z","updated_at":"2025-01-16T18:00:05.000Z","dependencies_parsed_at":"2023-12-06T01:38:03.328Z","dependency_job_id":null,"html_url":"https://github.com/ecureuill/saucedemo-playwright","commit_stats":null,"previous_names":["ecureuill/saucedemo-playwright"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecureuill%2Fsaucedemo-playwright","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecureuill%2Fsaucedemo-playwright/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecureuill%2Fsaucedemo-playwright/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecureuill%2Fsaucedemo-playwright/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ecureuill","download_url":"https://codeload.github.com/ecureuill/saucedemo-playwright/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243030771,"owners_count":20224663,"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":["e2e","e2e-tests","end-to-end","page-object","playwright","saucedemo","test","test-automation","typescript","ui-test"],"created_at":"2024-11-17T06:26:29.283Z","updated_at":"2025-03-11T11:49:22.398Z","avatar_url":"https://github.com/ecureuill.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Playwright E2E Testing Project for saucedemo.com\n\nHello! This is my E2E testing project for [saucedemo.com](www.saucedemo.com) using Playwright and TypeScript! I developed this project as part of my learning journey in test automation.\n\nThe workflow, defined in the `.github/workflows/playwright.yml` file, executes Playwright tests on specified browsers and operating systems. After the test execution, Playwright generates a comprehensive report detailing both passed and failed scenarios. The GitHub Actions workflow is set up to automatically publish this Playwright test report to GitHub Pages.\n\nThis integration ensures that the latest Playwright test results are readily available, providing transparency and visibility into the testing process.\n\nThe generated report, showcasing insights into the results of the Playwright tests, is accessible at [ecureuill.github.io/saucedemo-playwright](http://ecureuill.github.io/saucedemo-playwright).\n\n## Technologies Used\n\n- **Playwright**: A versatile library tailored for browser automation with a focus on reliability.\n- **TypeScript**: A statically typed superset of JavaScript.\n- **npm**: The package manager for JavaScript.\n\n## Project Structure\n\nThe project adopts a structured approach to maintainability and scalability. Here's an overview of the project's directory structure:\n\n```bash\nsaucedemo/\n├── tests/\n│   ├── components/\n│   │   ├── FooterComponent.ts\n│   │   └── ...\n│   ├── fixtures/\n│   │   ├── model.ts\n│   │   └── data/\n│   │       ├── cart.json\n│   │       ├── checkout.json\n│   │       ├── products.json\n│   │       └── users.json\n│   ├── pages/\n│   │   ├── LoginPage.ts\n│   │   └── ...\n│   ├── e2e/\n│   │   └── login.spec.ts\n│   │   └── ... \n│   ├── ui/\n│   │   └── login.spec.ts\n│   │   └── ... \n│   ├── visual/\n│   │   └── visual.spec.ts\n│   └── auth.setup.ts\n├── playwright.config.js\n├── node_modules/\n├── package.json\n├── tsconfig.json\n└── ...\n```\n## Types of Tests\n\n### 1. End-to-End (E2E) Tests\n\nE2E tests, located in `e2e/`, aim to verify the complete functionality of the application. They cover scenarios such as user authentication, navigation, and interactions with different pages. \n\nCheck all scenarios [here](/e2e.md).\n\n### 2. Visual Snapshot Tests\n\nVisual snapshot tests, located in the `visual/` directory, play a crucial role in ensuring the visual consistency of the application across various test runs. Leveraging Playwright's powerful screenshot capabilities, these tests capture valid screenshots while navigating through the site in the context of a `standard_user`. Subsequently, the application's interface is tested against these baseline screenshots, this time with the user logged in as `visual_user`. This comparison process helps identify and verify any changes in the interface, ensuring a consistent and visually appealing user experience.\n\n### 2. User Interface (UI) Tests\n\nThe UI tests, located in the `ui/` directory, are designed to scrutinize essential aspects such as usability, layout integrity, responsiveness, and the visual aesthetics of the application. In this initial version, responsiveness is assessed by simulating window resizing, and the integrity of the layout is validated. In upcoming versions, the testing scope will be expanded to delve deeper into these initiated aspects, while also addressing additional facets for a more comprehensive evaluation of the application's user interface. \n\nCheck all scenarios [here](/ui.md).\n\n\n## Page Objects and Componentization\n\nThe project embraces the Page Object pattern to encapsulate interactions with various pages of the SouceDemo website. Page objects are organized under the `pages/` directory, making the test code more readable, maintainable, and less prone to duplication.\n\nExample of a Page Object (`LoginPage.ts`):\n\n```typescript\nexport class LoginPage extends BasePage {\n    // Implementation of page interactions\n}\n```\n\nThe project also incorporates a `components/` directory to house reusable components like `FooterComponent.ts`, promoting a modular and efficient approach to building and maintaining tests.\n\n## Fixtures and Data\n\nData used in tests is organized under the `fixtures/` directory. This includes a `model.ts` file for defining data models and a `data/` directory housing various JSON files containing test data.\n\n\n## State Maintenance\n\nTo maintain the logged-in state of the website and access protected pages, the framework utilizes a `.storeState()` function located in `auth.setup.ts`. This function stores the authentication credentials in a secure location, allowing subsequent tests to seamlessly navigate through the application without requiring repetitive logins.\n\n## Test Execution\n\n1. Navigate to the project directory:\n\n   ```bash\n   cd saucedemo\n   ```\n\n1. Install dependencies:\n\n   ```bash\n   npm install\n   ```\n\n1. Run the tests:\n\n   ```bash\n   npx playwright test\n   ```\n\n## HTML reporter\n\nHTML reporter produces a self-contained folder that contains report for the test run that can be served as a web page.\n\n```bash\nnpx playwright test --reporter=html\n```\n\nBy default, HTML report is opened automatically if some of the tests failed. You can control this behavior via the open property in the Playwright config or the `PW_TEST_HTML_REPORT_OPEN` environmental variable. The possible values for that property are `always`, `never` and `on-failure` (default).\n\n## Trace viewer\n\nYou can open the saved trace using the Playwright CLI or in your browser on [trace.playwright.dev](trace.playwright.dev). Make sure to add the full path to where your trace.zip file is located. This should include the full path to your trace.zip file.\n\n```bash\nnpx playwright show-trace path/to/trace.zip\n```\n\n## Playwright Configuration\n\nThe `playwright.config.js` file configures the Playwright test environment. It specifies settings such as browsers to use, context options, and additional configurations needed for test execution.\n\n## Contribution\n\nI'm learning, so if you find anything interesting or peculiar, I'd love to discuss! Feel free to open issues or propose improvements.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fecureuill%2Fsaucedemo-playwright","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fecureuill%2Fsaucedemo-playwright","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fecureuill%2Fsaucedemo-playwright/lists"}