https://github.com/testing-library/testing-playground

Simple and complete DOM testing playground that encourage good testing practices.
https://github.com/testing-library/testing-playground

a11y browser-extension embeddable nodejs saas testing

Last synced: 3 months ago
JSON representation

Simple and complete DOM testing playground that encourage good testing practices.

• Host: GitHub
• URL: https://github.com/testing-library/testing-playground
• Owner: testing-library
• License: mit
• Created: 2020-05-18T12:13:05.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2023-06-09T08:21:43.000Z (over 1 year ago)
• Last Synced: 2024-04-14T01:49:25.138Z (10 months ago)
• Topics: a11y, browser-extension, embeddable, nodejs, saas, testing
• Language: JavaScript
• Homepage: https://testing-playground.com
• Size: 5.73 MB
• Stars: 769
• Watchers: 14
• Forks: 61
• Open Issues: 22
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Roadmap: ROADMAP.md

Awesome Lists containing this project

README

        


  
Testing-Playground

  

  [![test-tube](./public/icon.png)][emojione]


Simple and complete DOM testing playground that encourage good testing

practices.

[**online playground**][playground] | [next version][playground-next]





[![All Contributors](https://img.shields.io/badge/all_contributors-17-orange.svg?style=flat-square)](#contributors-)

**Playground for [testing-library/dom]**

![screenshot of unimported results](./docs/testing-playground-com.gif)

Testing-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.

Testing-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.

## Embedding

[Testing-Playground][playground] can also be embedded. There is are two embed modes. Manual integration, and `oembed`.

### Oembed

To get started with `oembed`, you'll simply need to copy / paste your direct playground links into a supporting platform.

### Manual integration ([demo][embed-demo])

Follow the following steps if you wish to have an interactive playground on your website.

Add the following snippet directly before your closing `