Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/testing-library/which-query

🦩 Which query should I use?
https://github.com/testing-library/which-query

chrome-extensions dom-testing-library react-testing-library testcafe-testing-library testing-library

Last synced: 3 months ago
JSON representation

🦩 Which query should I use?

Host: GitHub
URL: https://github.com/testing-library/which-query
Owner: testing-library
License: mit
Archived: true
Created: 2020-05-24T15:26:06.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2021-02-11T07:30:37.000Z (over 3 years ago)
Last Synced: 2024-04-14T01:49:24.503Z (7 months ago)
Topics: chrome-extensions, dom-testing-library, react-testing-library, testcafe-testing-library, testing-library
Language: CSS
Size: 2.21 MB
Stars: 124
Watchers: 8
Forks: 8
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE

Awesome Lists containing this project

awesome-list - which-query - library | 120 | (CSS)

README

        # ⚠️ Deprecation notice ⚠️

This repository has been deprecated in favor of [Testing Playground](http://github.com/testing-library/testing-playground), which contains the functionality provided here and can be downloaded through the [Chrome Web Store](https://chrome.google.com/webstore/detail/testing-playground/hejbmebodbijjdhflfknehhcgaklhano).



@testing-library/which-query



    



🦩 Which query should I use: the chrome extension



---

[![Build Status][build-badge]][build]

[![Code Coverage][coverage-badge]][coverage]

[![version][version-badge]][package]

[![downloads][downloads-badge]][npmtrends]

[![MIT License][license-badge]][license]

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

[![PRs Welcome][prs-badge]][prs]

[![Code of Conduct][coc-badge]][coc]

## The problem

When using testing-library, some developers may not be aware of

[which query to use](https://testing-library.com/docs/guide-which-query). 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](#installation)

- [Usage](#usage)

- [Inspiration](#inspiration)

- [Other Solutions](#other-solutions)

- [Issues](#issues)

  - [🐛 Bugs](#-bugs)

  - [💡 Feature Requests](#-feature-requests)

- [Contributors ✨](#contributors-)

- [LICENSE](#license)

## Installation

[Install from the chrome web store](https://chrome.google.com/webstore/detail/testing-library-which-que/olmmagdolfehlpjmbkmondggbebeimoh)

### From github releases (for previous versions)

1. Download a release from the [releases](https://github.com/testing-library/which-query/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:

```bash

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](https://youtu.be/g4i8k_Hue84)

[Get a Query by inspecting elements in devtools](https://www.youtube.com/watch?v=bt8RGZB6Yyw)

## Inspiration

[This tweet thread](https://twitter.com/benmonro/status/1264551204127780870?s=20)

## Other Solutions

I'm not aware of any, if you are please [make a pull request][prs] and add it

here!

## Issues

_Looking to contribute? Look for the [Good First Issue][good-first-issue]

label._

### 🐛 Bugs

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

[**See Bugs**][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**][requests]

## Contributors ✨

Thanks goes to these people ([emoji key][emojis]):

  

    
_{Ben Monro}
💻 ⚠️ 🤔 📖

    
_{Stephan Meijer}
🤔

    
_{Kent C. Dodds}
🤔

    
_{Nick McCurdy}
💻

  

This project follows the [all-contributors][all-contributors] specification.

Contributions of any kind welcome!

## LICENSE

MIT

[npm]: https://www.npmjs.com

[node]: https://nodejs.org

[build-badge]: https://img.shields.io/travis/com/testing-library/which-query.svg?style=flat-square

[build]: https://travis-ci.com/testing-library/which-query

[coverage-badge]: https://img.shields.io/codecov/c/github/testing-library/which-query.svg?style=flat-square

[coverage]: https://codecov.io/github/testing-library/which-query

[version-badge]: https://img.shields.io/npm/v/@testing-library/which-query.svg?style=flat-square

[package]: https://www.npmjs.com/package/@testing-library/which-query

[downloads-badge]: https://img.shields.io/npm/dm/@testing-library/which-query.svg?style=flat-square

[npmtrends]: http://www.npmtrends.com/@testing-library/which-query

[license-badge]: https://img.shields.io/npm/l/@testing-library/which-query.svg?style=flat-square

[license]: https://github.com/testing-library/which-query/blob/master/LICENSE

[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square

[prs]: http://makeapullrequest.com

[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square

[coc]: https://github.com/testing-library/which-query/blob/master/other/CODE_OF_CONDUCT.md

[emojis]: https://github.com/all-contributors/all-contributors#emoji-key

[all-contributors]: https://github.com/all-contributors/all-contributors

[bugs]: https://github.com/testing-library/which-query/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+sort%3Acreated-desc+label%3Abug

[requests]: https://github.com/testing-library/which-query/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc+label%3Aenhancement

[good-first-issue]: https://github.com/testing-library/which-query/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc+label%3Aenhancement+label%3A%22good+first+issue%22