wrap it in a chrome extension!

[smeijer]

I believe we can wrap this project into a chrome extension. That way people can use the thing on their own sites, without needing to copy / paste html fragments. How awesome would that be?!

---

Resources

• https://twitter.com/kentcdodds/status/1264253036626501632?s=19
• https://twitter.com/SferaDev/status/1264264904258748416?s=19

[marcosvega91]

This is a very great feature

[MichaelDeBoey]

@benmonro created an official one: https://github.com/testing-library/which-query

[smeijer]

That's an official testing-library one. I'm also working on a testing-playground extension. It will be different, so it might be good to have both. 😇

[benmonro]

Cool. What features are you putting into that one?

[smeijer]

@benmonro , how about a preview? 😎

https://twitter.com/meijer_s/status/1269703405150314498?s=20

[benmonro]

That's cool! It does feel like we should combine them into one extension though. Just my 2 cents

[MichaelDeBoey]

@smeijer Yours looks more like some sort of devtools & @benmonro's is more like a context menu plugin.

II think combining them into 1 thing seems indeed a good idea 🙂

[benmonro]

Yeah mine also has an elements inspector panel and adds things to the console. Would definitely love to combine forces on this. I think it'd be best for the community imo

[benmonro]

@smeijer i can make you admin on that repo in case that's a concern. Let me know how we can come together on this. My goal is just to make the best experience for everyone and avoid fragmenting

[smeijer]

No worries. Let me wrap this thing up, and see where we can meet.

The biggest concern that I have with being an "official extension" isn't about being an admin or not. It's about the limitations.

In my opinion, the official one should stick to the strict recommendations. While an unofficial extension, can provide some fallback queries. Less perfect, but still workable. (document.querySelector('.deep > .ly > .nested > .node'))

I still haven't tried which-query. I should definitely do that somewhere this week. 😳

[benmonro]

That's fair. How would you feel if I integrated some of what you've done into the official one? I was wanting to add a devtool page and what you have here is perfect....

[smeijer]

About which parts are you thinking specifically? Just functionality / code? Or also the look and feel of testing-playground.com?

If you tell me your plans with which-query, I might submit a PR once this one is done. But having two identical extensions doesn't make a lot of sense.

I've also added a pane to the element inspector. That's where my work in this extension started. But I moved to a dedicated panel later on. I can share a short video of that tomorrow.

[benmonro]

Yeah my plan was to build something very similar to what you have. Perhaps just the suggestion part. The goal if which query is to improve the a11y of the tests through the queries so I probably would leave the bottom half out (though if you want to combine them into one extension I'd be fine keeping it)