β οΈ 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.
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
Install from the chrome web store
From github releases (for previous versions)
-
Download a release from the releases page.
-
Unzip the file
-
make sure developer mode is on
-
Click "Load Unpacked"
-
Browse to '/path/to/where/you/unzipped
-
click select
From source:
- clone & install:
git clone [email protected]:testing-library/which-query.git
cd which-query
npm i
npm run build:chrome:dev-
in chrome navigate to chrome://extensions
-
make sure developer mode is on
-
Click "Load Unpacked"
-
Browse to '/path/to/where/you/cloned/chrome/build/unpacked'
-
click select
Usage
Use Testing Library in the browser console
Get a Query by inspecting elements in devtools
Inspiration
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.
π‘ 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.
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