{"id":13403806,"url":"https://github.com/testing-library/testing-playground","last_synced_at":"2025-03-14T08:32:10.289Z","repository":{"id":38310861,"uuid":"264928956","full_name":"testing-library/testing-playground","owner":"testing-library","description":"Simple and complete DOM testing playground that encourage good testing practices.","archived":false,"fork":false,"pushed_at":"2023-06-09T08:21:43.000Z","size":6005,"stargazers_count":789,"open_issues_count":22,"forks_count":62,"subscribers_count":14,"default_branch":"main","last_synced_at":"2024-10-29T17:37:29.969Z","etag":null,"topics":["a11y","browser-extension","embeddable","nodejs","saas","testing"],"latest_commit_sha":null,"homepage":"https://testing-playground.com","language":"JavaScript","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/testing-library.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":"ROADMAP.md","authors":null},"funding":{"github":["smeijer"]}},"created_at":"2020-05-18T12:13:05.000Z","updated_at":"2024-10-23T22:40:11.000Z","dependencies_parsed_at":"2024-01-16T10:36:49.334Z","dependency_job_id":"2a0dc9a4-44d0-4f7c-8a4b-1fb5c9be5bbc","html_url":"https://github.com/testing-library/testing-playground","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/testing-library%2Ftesting-playground","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/testing-library%2Ftesting-playground/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/testing-library%2Ftesting-playground/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/testing-library%2Ftesting-playground/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/testing-library","download_url":"https://codeload.github.com/testing-library/testing-playground/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241836881,"owners_count":20028267,"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":["a11y","browser-extension","embeddable","nodejs","saas","testing"],"created_at":"2024-07-30T19:01:34.862Z","updated_at":"2025-03-14T08:32:09.858Z","avatar_url":"https://github.com/testing-library.png","language":"JavaScript","readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003eTesting-Playground\u003c/h1\u003e\n  \n  [![test-tube](./public/icon.png)][emojione]\n\nSimple and complete DOM testing playground that encourage good testing\npractices.\n\n[**online playground**][playground] | [next version][playground-next]\n\n\u003c/div\u003e\n\n\u003chr /\u003e\n\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n[![All Contributors](https://img.shields.io/badge/all_contributors-17-orange.svg?style=flat-square)](#contributors-)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n**Playground for [testing-library/dom]**\n\n![screenshot of unimported results](./docs/testing-playground-com.gif)\n\nTesting-Library makes it easy to get started with testing. But even then, it can still be challenging to find the right queries or to understand why an element isn't being matched.\n\nTesting-Playground provides you with direct feedback. Trying to visualize the direct impact of adding and removing specific (aria) attributes. All to give you some visual support while learning about the importance of aria roles, labels, and attributes.\n\n## Embedding\n\n[Testing-Playground][playground] can also be embedded. There is are two embed modes. Manual integration, and `oembed`.\n\n### Oembed\n\nTo get started with `oembed`, you'll simply need to copy / paste your direct playground links into a supporting platform.\n\n### Manual integration ([demo][embed-demo])\n\nFollow the following steps if you wish to have an interactive playground on your website.\n\nAdd the following snippet directly before your closing `\u003c/body\u003e` tag:\n\n```html\n\u003cscript async src=\"https://testing-playground.com/embed.js\"\u003e\u003c/script\u003e\n```\n\nCreate a template element, in which you add to `script` tags. One for `html` and one for `javascript`. Make sure to type them correctly, as that's what our embedder uses to populate the different panes.\n\nNote that the `data-testing-playground` attribute is required as well.\n\n```html\n\u003ctemplate data-testing-playground\u003e\n  \u003cscript type=\"text/html\"\u003e\u003c/script\u003e\n\n  \u003cscript type=\"text/javascript\"\u003e\u003c/script\u003e\n\u003c/template\u003e\n```\n\nNow, you can populate the `html` and `javascript` elements:\n\n```html\n\u003ctemplate data-testing-playground\u003e\n  \u003cscript type=\"text/html\"\u003e\n    \u003cbutton\u003eone\u003c/button\u003e\n  \u003c/script\u003e\n\n  \u003cscript type=\"text/javascript\"\u003e\n    screen.getByRole('button');\n  \u003c/script\u003e\n\u003c/template\u003e\n```\n\n#### options\n\nTo configure your playground even further, add one or more of the following attributes to your opening `\u003ctemplate\u003e` tag. Note, don't remove the `data-testing-playground` attribute!\n\n| attribute    | type                                               | default                                  | description                                     |\n| ------------ | -------------------------------------------------- | ---------------------------------------- | ----------------------------------------------- |\n| data-panes   | [markup \u0026#124; preview \u0026#124; query \u0026#124; result] | ['markup', 'preview', 'query', 'result'] | which panes to show, and in what order          |\n| data-height  | number \u0026#124; string                               | 300                                      | height of the element                           |\n| data-width   | number \u0026#124; string                               | '100% '                                  | width of the element                            |\n| data-loading | eager \u0026#124; lazy                                  | 'lazy'                                   | load the frame eager or lazy (see iframe specs) |\n\n#### dynamic updates\n\nPlayground can be updated using [cross-window messaging](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)\nafter it has been loaded. After the playground is loaded, you can update it with following message: `{type: 'UPDATE_DATA', markup: 'new markup', query: 'new query'}` with both `markup` and `query` being optional.\n\nTo find out, if playground is ready, you can listen for a message `{source: 'embedded-testing-playground', type: 'READY'}`\nin window from which are you embedding the playground.\n\nExample:\n\n```html\n\u003ctemplate data-testing-playground data-class=\"messaging-iframe\"\u003e\u003c/template\u003e\n\u003cscript type=\"text/javascript\"\u003e\n  function updatePlayground() {\n    const iframe = document.querySelector('.messaging-iframe');\n    iframe.contentWindow.postMessage(\n      { type: 'UPDATE_DATA', markup: 'new markup', query: 'new query' },\n      'https://testing-playground.com',\n    );\n  }\n\n  window.addEventListener('message', ({ data }) =\u003e {\n    if (\n      data.source === 'embedded-testing-playground' \u0026\u0026\n      data.type === 'READY'\n    ) {\n      updatePlayground();\n    }\n  });\n\u003c/script\u003e\n```\n\n## Roadmap\n\nFuture ideas are maintained in [roadmap.md]. Please use the [issue tracker] to discuss any questions or suggestions you have.\n\nEvery section in the roadmap is accompanied by one or more issues. Contributions are most welcome!\n\n## Contributing\n\nPlease see [contributing.md] for more details. If you just want to run the playground on your own machine, go to your terminal and enter the following commands:\n\n```bash\ngit clone git@github.com:testing-library/testing-playground.git\ncd testing-playground\nnpm ci\nnpm run dev\n```\n\n## Contributors\n\nThanks goes to these people ([emoji key][emojis]):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/smeijer\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/1196524?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eStephan Meijer\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#ideas-smeijer\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/testing-library/testing-playground/commits?author=smeijer\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#infra-smeijer\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e \u003ca href=\"#maintenance-smeijer\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/marcosvega91\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/5365582?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMarco Moretti\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/testing-library/testing-playground/commits?author=marcosvega91\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/testing-library/testing-playground/commits?author=marcosvega91\" title=\"Tests\"\u003e⚠️\u003c/a\u003e \u003ca href=\"https://github.com/testing-library/testing-playground/commits?author=marcosvega91\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://timdeschryver.dev\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/28659384?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eTim Deschryver\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/testing-library/testing-playground/commits?author=timdeschryver\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://kentcdodds.com\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/1500684?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eKent C. Dodds\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#ideas-kentcdodds\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://michaeldeboey.be\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/6643991?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMichaël De Boey\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/testing-library/testing-playground/commits?author=MichaelDeBoey\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/delca85\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/4076043?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBianca Del Carretto\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/testing-library/testing-playground/commits?author=delca85\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/testing-library/testing-playground/commits?author=delca85\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://gerritalex.de\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/29307652?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eGerrit Alex\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/testing-library/testing-playground/commits?author=ljosberinn\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/testing-library/testing-playground/commits?author=ljosberinn\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://www.guzy.dev\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/9118764?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDominik Guzy\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/testing-library/testing-playground/commits?author=Siemko\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/connorProgrammes\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/66570218?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eConnorProgrammes\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/testing-library/testing-playground/commits?author=connorProgrammes\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"https://github.com/testing-library/testing-playground/commits?author=connorProgrammes\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://twitter.com/JacobMGEvans\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/27247160?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJacob M-G Evans\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/testing-library/testing-playground/commits?author=JacobMGEvans\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/testing-library/testing-playground/commits?author=JacobMGEvans\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/sumeesh879\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/20029120?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSumeesh Nagisetty\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/testing-library/testing-playground/pulls?q=is%3Apr+reviewed-by%3Asumeesh879\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://www.linkedin.com/in/flaviohfreitas\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/1553609?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eFlávio H Freitas\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/testing-library/testing-playground/commits?author=flaviohenriquecbc\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/bmeverett\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/3941006?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBrandon Everett\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/testing-library/testing-playground/commits?author=bmeverett\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://brainbox.cz/\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/762095?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMichal Kočárek\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/testing-library/testing-playground/commits?author=michal-kocarek\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#ideas-michal-kocarek\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://aganglada.com\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/922348?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAlejandro Garcia Anglada\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/testing-library/testing-playground/commits?author=aganglada\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/testing-library/testing-playground/commits?author=aganglada\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"https://github.com/testing-library/testing-playground/commits?author=aganglada\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/ddehart\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/901215?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eddehart\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/testing-library/testing-playground/commits?author=ddehart\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/testing-library/testing-playground/commits?author=ddehart\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://balavishnuvj.com/?utm_source=github\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/13718688?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBalavishnu V J\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/testing-library/testing-playground/commits?author=balavishnuvj\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-enable --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors][all-contributors] specification.\nContributions of any kind welcome!\n\n[testing-library/dom]: https://testing-library.com/docs/dom-testing-library/example-intro\n[playground]: https://testing-playground.com\n[playground-next]: https://develop.testing-playground.com\n[embed-demo]: https://codepen.io/smeijer/pen/yLYWZmK\n[roadmap.md]: https://github.com/testing-library/testing-playground/blob/develop/ROADMAP.md\n[contributing.md]: https://github.com/testing-library/testing-playground/blob/develop/CONTRIBUTING.md\n[issue tracker]: https://github.com/testing-library/testing-playground/issues\n[all-contributors]: https://github.com/all-contributors/all-contributors\n[emojis]: https://allcontributors.org/docs/en/emoji-key\n[emojione]: https://www.emojione.com/emoji/1f9e\n","funding_links":["https://github.com/sponsors/smeijer"],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftesting-library%2Ftesting-playground","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftesting-library%2Ftesting-playground","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftesting-library%2Ftesting-playground/lists"}