⚠️ Deprecation notice ⚠️

This repository has been deprecated in favor of Testing Playground, which contains the functionality provided here and can be downloaded through the Chrome Web Store.

@testing-library/which-query

? Which query should I use: the chrome extension

The problem

When using testing-library, some developers may not be aware of which query to use. As a result, folks will jump to using escape hatches like *ByTestId or querySelector.

This solution

This chrome extension aims to enable developers to find a better query when writing tests. Right click on an element on any web page and it will copy the best possible query for that element into your clipboard. Then simply paste into your test code.

Table of Contents

• Installation
• Usage
• Inspiration
• Other Solutions
• Issues
  • ? Bugs
  • ? Feature Requests
• Contributors ✨
• LICENSE

Installation

Install from the chrome web store

From github releases (for previous versions)

1. Download a release from the releases page.

2. Unzip the file

3. make sure developer mode is on

4. Click "Load Unpacked"

5. Browse to '/path/to/where/you/unzipped

6. click select

From source:

1. clone & install:

git clone [email protected]:testing-library/which-query.git
cd which-query
npm i
npm run build:chrome:dev

2. in chrome navigate to chrome://extensions

3. make sure developer mode is on

4. Click "Load Unpacked"

5. Browse to '/path/to/where/you/cloned/chrome/build/unpacked'

6. click select

Usage

Use Testing Library in the browser console

Get a Query by inspecting elements in devtools

Inspiration

This tweet thread

Other Solutions

I'm not aware of any, if you are please make a pull request and add it here!

Issues

Looking to contribute? Look for the Good First Issue label.

? Bugs

Please file an issue for bugs, missing documentation, or unexpected behavior.

See Bugs

? Feature Requests

Please file an issue to suggest new features. Vote on feature requests by adding a ?. This helps maintainers prioritize what to work on.

See Feature Requests

Contributors ✨

Thanks goes to these people (emoji key):

Ben Monro ? ⚠️ ? ?

Stephan Meijer ?

Kent C. Dodds ?

Nick McCurdy ?

This project follows the all-contributors specification. Contributions of any kind welcome!

LICENSE

MIT