{"id":13651381,"url":"https://github.com/detachhead/playwright-ui5","last_synced_at":"2025-04-15T06:13:04.847Z","repository":{"id":157080187,"uuid":"633303710","full_name":"DetachHead/playwright-ui5","owner":"DetachHead","description":null,"archived":false,"fork":false,"pushed_at":"2024-11-25T05:44:30.000Z","size":147,"stargazers_count":7,"open_issues_count":12,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-15T06:12:58.461Z","etag":null,"topics":["playwright","sap","ui5"],"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/DetachHead.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":"2023-04-27T08:02:08.000Z","updated_at":"2025-02-27T03:19:09.000Z","dependencies_parsed_at":"2023-05-16T09:45:49.236Z","dependency_job_id":"5d2ec7d6-8194-458c-ac7d-397b09f6453c","html_url":"https://github.com/DetachHead/playwright-ui5","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DetachHead%2Fplaywright-ui5","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DetachHead%2Fplaywright-ui5/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DetachHead%2Fplaywright-ui5/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DetachHead%2Fplaywright-ui5/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DetachHead","download_url":"https://codeload.github.com/DetachHead/playwright-ui5/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249016638,"owners_count":21198833,"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":["playwright","sap","ui5"],"created_at":"2024-08-02T02:00:48.805Z","updated_at":"2025-04-15T06:13:04.829Z","avatar_url":"https://github.com/DetachHead.png","language":"TypeScript","funding_links":[],"categories":["Utils"],"sub_categories":[],"readme":"# playwright ui5\n\nplaywright [custom selector engines](https://playwright.dev/docs/extensibility#custom-selector-engines) for [sapui5](https://ui5.sap.com/)\n\n## installation\n\n```bash\nnpm install playwright-ui5\n```\n\n## usage\n\nplaywright-ui5 contains a selector engine for both css and xpath syntax. you can use whichever one you want, but the xpath one is more flexible since not all css selector syntax has been implemented yet.\n\n### css selector engine\n\n```ts\nimport { selectors, test } from '@playwright/test'\nimport { css } from 'playwright-ui5'\n\ntest.beforeAll(async () =\u003e {\n    await selectors.register('ui5', css)\n})\n\ntest('ui5 example', ({ page }) =\u003e {\n    await page.goto('https://ui5.sap.com/')\n    await page.click(\"ui5=sap.m.Button[text='Get Started with UI5']\")\n})\n```\n\n#### syntax\n\nthe main difference between regular CSS selectors and playwright-ui5's syntax is is that `.` is not used for class names, rather they are treated as part of the type name (ie. `sap.m.Button`).\n\n| feature             | examples                                                   | suported | notes                                                                                                                                         |\n| ------------------- | ---------------------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------- |\n| type selectors      | `sap.m.Button`, `m.Button`, `*`                            | ✔        |\n| class selectors     | n/a                                                        | n/a      | as mentioned above, `.` is treated as part of the control type                                                                                |\n| attribute selectors | `[text]`, `[text='foo']`, `[text*='foo']` ,`[text~='foo']` | ✔        | `~=` trims leading and trailing whitespace for the whole value instead of matching a whitespace-separated list of values like it does in CSS. |\n| id selectors        | `sap.m.Button#foo`                                         | ✔        | you should not use id selectors if the id is generated (eg. `__button1`) as they can change often                                             |\n| nesting             | `sap.m.Table sap.m.Button`,`sap.m.Table \u003e sap.m.Button`    | ❌       | use playwright selector nesting instead (`ui5=sap.m.Table \u003e\u003e ui5=sap.m.Button`)                                                               |\n| pseudo-classes      | `sap.m.Table:has(sap.m.Button)`                            | ✔        | only `:has` is supported for now                                                                                                              |\n| pseudo-elements     | `sap.m.DateTimeField::subclass`                            | ✔        | `::subclass` will match the specified control type and any subtypes (eg. both `sap.m.DateTimeField` and subtypes like `sap.m.DatePicker`)     |\n| selector lists      | `sap.m.Button,sap.m.Table`                                 | ✔        |\n\n### xpath selector engine\n\n```ts\nimport { selectors, test } from '@playwright/test'\nimport { xpath } from 'playwright-ui5'\n\ntest.beforeAll(async () =\u003e {\n    await selectors.register('ui5', xpath)\n})\n\ntest('ui5 example', ({ page }) =\u003e {\n    await page.goto('https://ui5.sap.com/')\n    await page.click(\"ui5=//sap.m.Button[ui5:property(., 'text')='Get Started with UI5']\")\n})\n```\n\n#### syntax\n\nunlike the CSS selector syntax, all xpath syntax is supported (even newer xpath features up to version 3.1 thanks to [fontoxpath](https://github.com/FontoXML/fontoxpath)).\n\nnote that properties cannot be accessed via the `@attribute` syntax. this is because the selector engine needs to build an XML tree of all the ui5 elements on the page, and for performance reasons the properties are not evaluated during this step, so the only attribute that can be accessed that way is the element's ID.\n\nfor example, for a button with the id `\"foo\"` and the text `\"bar\"`, the xml view may look like this:\n\n```xml\n\u003csap.m.Page id=\"__page0\"\u003e\n    \u003csap.m.Button id=\"foo\"\u003e\u003c/sap.m.Button\u003e\n\u003c/sap.m.Page\u003e\n```\n\nin this case, `//sap.m.Button[@id='foo']` will work, but `//sap.m.Button[@text='bar']` will not. to access the property, you can use the [`ui5:property`](#ui5property) xpath function instead, like so:\n\n```xpath\n//sap.m.Button[ui5:property(., 'text')='bar']\n```\n\nthe XML view matches the control tree from the [ui5 diagnostics window](https://sapui5.hana.ondemand.com/sdk/#/topic/04b75eae78ef4bae9b40cd7540ae8bdc) and the [ui5 inspector chrome extension](https://chromewebstore.google.com/detail/ui5-inspector/bebecogbafbighhaildooiibipcnbngo), so we recommend using one of these when working with the ui5 xpath selector engine.\n\n#### the root node\n\nsince the ui5 control tree can have multiple root nodes, the xpath selector engine wraps `sap-ui-area` nodes inside a `root` node:\n\n```xml\n\u003croot\u003e\n    \u003csap-ui-area id=\"sap-ui-static\"\u003e\n        \u003csap.m.Page id=\"__page0\"\u003e\n            \u003csap.m.Button id=\"foo\"\u003e\u003c/sap.m.Button\u003e\n        \u003c/sap.m.Page\u003e\n    \u003c/sap-ui-area\u003e\n    \u003csap-ui-area id=\"canvas\"\u003e\n\u003c/root\u003e\n```\n\n#### API\n\nthe following xpath functions are available in the `ui5:` namespace:\n\n##### `ui5:property`\n\n-   **arguments:** `element()`, `xs:string`\n-   **return type:** `item()*`\n\ngets the value for the property with the specified name from the specified element\n\n```xpath\n//sap.m.Button[ui5:property(., \"text\")=\"Click here\"]\n```\n\n##### `ui5:debug-xml`\n\n-   **arguments:** `element()`\n-   **return type:** N/A (always throws an exception)\n\nraises an exception containining the XML control tree with the specified element as the root. this function is only intended for debugging purposes.\n\n```xpath\nui5:debug-xml(/*)\n```\n\nthis will throw an exception containing the entire control tree for the page in XML format:\n\n```\nplaywright-ui5 debug-xml function was called. here is the XML element tree:\n\n\u003csap-ui-area id=\"sap-ui-static\"\u003e\n    \u003c!-- ... --\u003e\n\u003c/sap-ui-area\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdetachhead%2Fplaywright-ui5","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdetachhead%2Fplaywright-ui5","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdetachhead%2Fplaywright-ui5/lists"}