{"id":15040692,"url":"https://github.com/lseg/ag-grid-playwright","last_synced_at":"2025-04-14T18:33:39.164Z","repository":{"id":190357477,"uuid":"681570672","full_name":"LSEG/ag-grid-playwright","owner":"LSEG","description":"A simple way to test ag-grid with Playwright. Extensible enough to cover the all of ag-grid's features.","archived":false,"fork":false,"pushed_at":"2023-10-19T09:23:10.000Z","size":33,"stargazers_count":17,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-28T07:03:24.615Z","etag":null,"topics":["ag-grid","ag-grid-react","automated-testing","javascript","nodejs","npm","playwright","playwright-javascript","testing","testing-tools","typescript"],"latest_commit_sha":null,"homepage":"","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/LSEG.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-08-22T09:48:48.000Z","updated_at":"2025-03-01T23:54:00.000Z","dependencies_parsed_at":"2023-08-24T09:20:35.267Z","dependency_job_id":"605052a3-ee66-4f08-8c0f-26dc585bc635","html_url":"https://github.com/LSEG/ag-grid-playwright","commit_stats":{"total_commits":3,"total_committers":1,"mean_commits":3.0,"dds":0.0,"last_synced_commit":"eefb677fb3f2c5168e2544e8168dd5df77903ea5"},"previous_names":["lseg/ag-grid-playwright"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LSEG%2Fag-grid-playwright","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LSEG%2Fag-grid-playwright/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LSEG%2Fag-grid-playwright/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LSEG%2Fag-grid-playwright/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LSEG","download_url":"https://codeload.github.com/LSEG/ag-grid-playwright/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248937120,"owners_count":21186168,"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":["ag-grid","ag-grid-react","automated-testing","javascript","nodejs","npm","playwright","playwright-javascript","testing","testing-tools","typescript"],"created_at":"2024-09-24T20:44:55.947Z","updated_at":"2025-04-14T18:33:39.141Z","avatar_url":"https://github.com/LSEG.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `ag-grid-playwright`\nTest ag-grid using Playwright in a simple, consistent, and extensive way. This library lets you test simple rows and columns or extend it to test ag-grid from playwright in it's entirety.\n\n## Usage\nWrap your React ag-grid with AGGridTestHarness and give it a unique gridId.\n\n```jsx\n      \u003cAGGridTestHarness gridId=\"my-grid-id\"\u003e\n        \u003cAgGridReact rowData={[...]} columnDefs={[...]} /\u003e\n      \u003c/AGGridTestHarness\u003e\n```\n\nYour test code has access to rows and columns with one call from ag-grid api or DOM.\n\n```jsx\n  // from ag-grid api\n  const agGridApiRows = await page.evaluate(() =\u003e window.agGrid.getApiRows('my-grid-id'));\n  const agGridApiColumns = await page.evaluate(() =\u003e window.agGrid.getApiColumns('my-grid-id'));\n\n  // from rendered dom\n  const agGridDomRows = await page.evaluate(() =\u003e window.agGrid.getDomRows('my-grid-id'));\n  const agGridDomColumns = await page.evaluate(() =\u003e window.agGrid.getDomColumns('my-grid-id'));\n```\n\n# Example Use Cases\n- You need a simple way to access the rows and columns of an ag-grid.\n- You have an ag-grid with a master detail panel and you need to test the contents of your detail panel is rendered as you expect after expanding a row.\n- You want to expand a row group to check the rendered rows.\n- You need to do something programmically in the ag-grid api and then test the results of your application.\n\nRead more about the motivation for this plugin [here](#motivation).\n\n## Requirements\n- ***React 18*** For now examples are for React 18. However, more examples can be added to cover all the frameworks that ag-grid supports pure JavaScript, Vue, Angular, and Solid.\n- ***ag-grid 30*** While this has been tested with ag-grid 18 prior version are likely to be compatiable. Also note this library has a dependency on the internal api of ag-grid\n\n## Installation\n```sh\nnpm install ag-grid-playwright\n```\n\n## Example\n```jsx\n      \u003cAGGridTestHarness gridId=\"my-grid-id\"\u003e\n        \u003cAgGridReact\n          rowData={[\n            { make: \"Toyota\", model: \"Celica\", price: 35000 },\n            { make: \"Ford\", model: \"Mondeo\", price: 32000 },\n            { make: \"Porsche\", model: \"Boxster\", price: 72000 }\n          ]}\n          columnDefs={[{ field: 'make' },{ field: 'model' },{ field: 'price' }]\n        } /\u003e\n      \u003c/AGGridTestHarness\u003e\n```\n\nIn your test you can now access the raw grid api rows and columns or via the neatly with getApiRows, getApiColumns, getDomRows, and getDomColumns.\n\n```jsx\nimport { test, expect } from '@playwright/test';\n\ntest.beforeEach(async ({ page }, testInfo) =\u003e {\n  await page.addInitScript({ path: 'node_modules/playwright-ag-grid/aggrid-test-util.js' });\n});\n\ntest('Test our AGGrids rows and columns match the data we expect', async ({ page }) =\u003e {\n  const expectedRows = [\n    { make: \"Toyota\", model: \"Celica\", price: 35000 },\n    { make: \"Ford\", model: \"Mondeo\", price: 32000 },\n    { make: \"Porsche\", model: \"Boxster\", price: 72000 }\n  ];\n\n  const expectedColumns = ['make', 'model', 'price'];\n  await page.goto('http://mypage.com');\n  const grid = page.locator('.my-grid-id');\n  await grid.waitFor();\n\n  const agGridApiRows = await page.evaluate(() =\u003e window.agGrid.getApiRows('my-grid-id'));\n  const agGridApiColumns = await page.evaluate(() =\u003e window.agGrid.getApiColumns('my-grid-id'));\n\n  expect(agGridApiRows).toEqual(expectedRows);\n  expect(agGridApiColumns).toEqual(expectedColumns);\n\n});\n```\n\n## Demo \u0026 Further Examples Code / Tests\nRun the following to commands in separate consoles in order to start the demo app and run the Playwright tests.\n\nIn the **examples** folder run\n```js\n  npm install\n  npm run dev\n```\n\nin the **test** folder run\n```js\n  npm install\n  npm run tests\n```\n\nCheck out https://github.com/LSEG/ag-grid-playwright/tree/main/examples for full example app and https://github.com/LSEG/ag-grid-playwright/tree/main/test for full example test.\n\n## How to extend \nCover all of ag-grid capabilities including enterprise version.\n\n```jsx\n// In your test code add a custom script\ntest.beforeEach(async () =\u003e {\n  await page.addInitScript({ path: 'node_modules/playwright-ag-grid/aggrid-test-util.js' });\n  // add your custom helper\n  await page.addInitScript({ path: 'playwright-ag-grid/src/custom-ag-grid-test-util.js' });\n});\n```\n\nIn your custom-ag-grid-test-util.js you can now add custom functions with full access to the ag-grid api. Call any method in https://www.ag-grid.com/react-data-grid/grid-api/. NOTE: You must return json.\n\n```jsx\nwindow.agGrid = ['isFirstNodeExpanded'] = (testId) =\u003e {\n    const api = window?.__AG_GRID_TEST__[testId]?.api;\n    const node = api?.getRowNode(0);\n    return node.isExpanded;\n  }\n```\n\nIn your test you can now call your custom test helper.\n\n```jsx\ntest('Test using our custom AGGrids helper', async ({ page }) =\u003e {\n  await page.goto('http://mypage.com');\n  const grid = page.locator('.my-grid-id');\n  await grid.waitFor();\n\n  const isFirstNodeExpanded = await page.evaluate(() =\u003e window.agGrid.isFirstNodeExpanded('my-grid-id'));\n  expect(isFirstNodeExpanded).toEqual(false);\n});\n```\n\nTo debug your custom helpers keep pause page execution with a while statement and set playwright headless config to false\nhttps://playwright.dev/docs/api/class-testoptions#test-options-headless\n\n```jsx\ntest('Test using our custom AGGrids helper', async ({ page }) =\u003e {\n  await page.goto('http://mypage.com');\n  const grid = page.locator('.my-grid-id');\n  await grid.waitFor();\n  while(true) {}; //add for debugging\n  const isFirstNodeExpanded = await page.evaluate(() =\u003e window.agGrid.isFirstNodeExpanded('my-grid-id'));\n  expect(isFirstNodeExpanded).toEqual(false);\n});\n```\n\nYou can now debug your helpers fully in Chrome.\n\n## Motivation\n\n### Problem\nThere currently is not an easy way to test ag-grid extensively with Playwright (or Cypress). You get bogged down with endless class selectors which are bittle and hard to maintain and read.\n\n### Solution\nag-grid-playwright creates a single link between your ag-grid and instance and test code allowing full access to the ag-grid's api in memory as your test code interacts with it. Furthermore, all of the DOM selectors to access the raw DOM elements can be isolated to a single aggrid-test-util.js helper class making it easier to read and maintain.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flseg%2Fag-grid-playwright","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flseg%2Fag-grid-playwright","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flseg%2Fag-grid-playwright/lists"}