{"id":13651328,"url":"https://danteukraine.github.io/playwright-elements/","last_synced_at":"2025-04-22T22:30:59.664Z","repository":{"id":61839034,"uuid":"543506619","full_name":"DanteUkraine/playwright-elements","owner":"DanteUkraine","description":null,"archived":false,"fork":false,"pushed_at":"2024-05-16T09:04:07.000Z","size":478,"stargazers_count":19,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-05-22T08:02:28.946Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DanteUkraine.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2022-09-30T08:41:28.000Z","updated_at":"2024-05-16T09:04:13.000Z","dependencies_parsed_at":"2024-02-23T12:43:02.324Z","dependency_job_id":"df4aaa01-5cb9-4e90-8b0b-9d138ddf7427","html_url":"https://github.com/DanteUkraine/playwright-elements","commit_stats":{"total_commits":74,"total_committers":4,"mean_commits":18.5,"dds":"0.22972972972972971","last_synced_commit":"7f045c2a022c4f6249853a7cec13de75bbf2f887"},"previous_names":[],"tags_count":44,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DanteUkraine%2Fplaywright-elements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DanteUkraine%2Fplaywright-elements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DanteUkraine%2Fplaywright-elements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DanteUkraine%2Fplaywright-elements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DanteUkraine","download_url":"https://codeload.github.com/DanteUkraine/playwright-elements/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223906226,"owners_count":17223045,"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":[],"created_at":"2024-08-02T02:00:48.068Z","updated_at":"2025-04-22T22:30:59.658Z","avatar_url":"https://github.com/DanteUkraine.png","language":"TypeScript","funding_links":[],"categories":["Utils"],"sub_categories":[],"readme":"# Playwright-elements\n[![Awesome](https://awesome.re/mentioned-badge.svg)](https://github.com/mxschmitt/awesome-playwright/blob/master/README.md#utils)\n\n___\n*Playwright-elements allows you to create reusable components with child elements and chainable methods. \nIt minimizes boilerplate code in your page objects and even enables you to work without them entirely.*\n\n*This library makes it easy to represent the tree structure of a web component. \nEach component can have multiple descendants, and all elements in the tree inherit the Locator API. \nYou can therefore chain calls-mixing element selectors with synchronous methods-to build expressive and concise tests.*\n\n***Installation:***\n\nRun the following command to install the package:\n\n`npm install -D playwright-elements`\n\n___\n- [Get started](docs/get_started.md)\n- [Web element](docs/web_element.md)\n- [Playwright elements fixtures](docs/playwright_elements_fixtures.md)\n- [Build page object](docs/build_page_object.md)\n- [Browser instance](docs/browser_instance.md)\n\n#### Tests with playwright-elements:\n\npages/loginPage.ts\n```ts\nimport { $ } from 'playwright-elements';\n\n// Component can be defined outside of class and is independent from page lifecicle. \nconst header = $('.header')\n  .with({\n    logo: $('.header-logo'),\n    avatar: $('.avatar')\n  });\n\nexport class LoginPage {\n  readonly header = header;\n  // Login form exist only on one page and can be defined only in this page.\n  readonly form = $('.login-form')\n      .with({\n          usernameInput: $('input[name=\"username\"]'),\n          passwordInput: $('input[name=\"password\"]'),\n          loginButton: $('button[type=\"submit\"]'),\n          async fillForm(userName: string, password: string) {\n              await this.usernameInput.fill(userName);\n              await this.passwordInput.fill(password);\n              await this.loginButton.click();\n          }\n      });\n}\n\n```\npages/index.ts\n```ts\nexport * from './loginPage';\n```\ntest/fixtures.ts\n```ts\nimport { test as baseTest, buildPageObject, PageObject } from 'playwright-elements';\nimport * as pageObjectModule from '../pages';\n// Allows to set page object fixture once and it will extend fixture with new pages in module automatically.\ntype TestFixtures = { pageObject: PageObject\u003ctypeof pageObjectModule\u003e };\n\nexport const test = baseTest.extend({\n    pageObject: [async ({}, use) =\u003e {\n        await use(buildPageObject(pageObjectModule));\n    }, { scope: 'test' }],\n});\n```\nNow enjoy.\ntest/login.test.ts\n```ts\nimport { test } from './fixtures';\n\ntest('check login page', async ({ pageObject }) =\u003e {\n    await pageObject.login.form.fillForm('UserName', 'Pass!');\n    \n    await pageObject.login.header.logo.expect().toBeVisible();\n    await pageObject.login.header.avatar.expect().toBeVisible();\n});\n```\n\n#### Tests with playwright-elements using component driven test style:\n\nelements.ts\n```ts\nimport { $ } from 'playwright-elements';\n\n// Component can be defined outside of class and is independent from page lifecicle. \nexport const header = $('.header')\n  .with({\n    logo: $('.header-logo'),\n    avatar: $('.avatar')\n  });\n\nexport const form = $('.login-form')\n  .with({\n    usernameInput: $('input[name=\"username\"]'),\n    passwordInput: $('input[name=\"password\"]'),\n    loginButton: $('button[type=\"submit\"]'),\n    async fillForm(userName: string, password: string) {\n      await this.usernameInput.fill(userName);\n      await this.passwordInput.fill(password);\n      await this.loginButton.click();\n    }\n  });\n\n```\n\ntest/fixtures.ts\n```ts\nimport { test as baseTest } from 'playwright-elements';\nimport * as elements from '../elements';\n\ntype TestFixtures = { elements: typeof elements };\n\nexport const test = baseTest.extend({\n    elements: [async ({}, use) =\u003e {\n        await use(elements);\n    }, { scope: 'test' }],\n});\n```\nNow enjoy component driven tests style.\ntest/login.test.ts\n```ts\nimport { test } from './fixtures';\n\ntest('check login page', async ({ elements }) =\u003e {\n    await elements.form.fillForm('UserName', 'Pass!');\n    \n    await elements.header.logo.expect().toBeVisible();\n    await elements.header.avatar.expect().toBeVisible();\n});\n```\n\n*[Release notes.](https://github.com/DanteUkraine/playwright-elements/releases)*\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/danteukraine.github.io%2Fplaywright-elements%2F","html_url":"https://awesome.ecosyste.ms/projects/danteukraine.github.io%2Fplaywright-elements%2F","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/danteukraine.github.io%2Fplaywright-elements%2F/lists"}