End-to-End testing with Jesteer will supercharge your development

End-to-end (E2E) testing is a critical part of the testing process. You need E2E tests to assure yourself that, once all the disparate parts of your application come together, the app works for all your end-user’s use cases. E2E testing is an especially important part of regression testing: as your team keeps coding, whether they’re implementing new features or making gains on your tech debt, you’ve got to be certain that no one inadvertently breaks your app along the way.

But let’s face it: writing end-to-end tests manually can be tedious and repetitive. If you’re writing an end-to-end test with Puppeteer, for example, you’ll have to:

1. Figure out what use case you’ll be testing.
2. Break that use case down into discrete steps.
3. For each step, get the CSS selector of the DOM node the user will interact with at that step.
4. Switch back to your IDE, and write a Puppeteer command.
5. Repeat steps 3–4.
6. Finally, if your app looks the way you expect it to for your use case, get the CSS selector of a DOM node displaying that expected behavior, and write an expect statement with your test runner.

Now this is fine, but it’s slow and boring, and we all know that a bored developer is less productive. Writing such tests manually also runs counter to the basic idea of end-to-end: a good end-to-end test should test your apps from the perspective of the end user. Diving into the DOM tree and wrangling with code doesn’t seem very close to the normal use of an app, now does it?

Enter Jesteer: an open-source Chrome Extension that generates tests as you navigate through your web app! No more digging through code, no more endless switching between your browser and your IDE. With Jesteer, testing is as easy as 1, 2, 3:

1. Start recording, and navigate a use-case through your app.
2. Take snapshots of DOM elements displaying the behavior you expect with a single click.
3. Export your test suite, built with Jest and Puppeteer. Voilà!

And here’s a quick gif of Jesteer in action:

End-to-end testing with Jesteer is a low-code solution, even enabling non-engineers to contribute to your organization’s test coverage. Jesteer can handle most basic use-cases: for any combination of clicking and typing, including hyperlinks and form submissions*, we’ve got you covered. If your codebase has test debt, it’s never been easier to tackle, and if you’re up-to-date with tests, Jesteer helps you stay up-to-date.

So! If you want to jump right in, you can download Jesteer here. (For now you’ll have to load Jesteer unpacked from our GitHub. As soon as Google finishes reviewing Jesteer, you’ll be able to download it from the Chrome Web Store as well.)

If you want to hear about our design decisions, how Jesteer works under the hood, and how Jesteer differs from other options out there, keep reading!

---

Still with us? Great!

You might be wondering why Jesteer uses Jest and Puppeteer. Jest was our choice of test runner, because Jest is an extremely popular and versatile framework that you’re likely already using. We chose Puppeteer for Jesteer’s headless browser API over alternatives like Playwright and Cypress for its especially close integration with Chromium. Being a Chrome Extension, Jesteer lives in Chrome, and using Puppeteer helps us guarantee that the tests you record in Chrome will generate valid scripts.

So how does Jesteer work under the hood? Jesteer uses a message passing architecture with content script injection to communicate between the web app your testing and the extension itself. When you first click the “Record” button, a few things happen. First, Jesteer activates its service worker, which handles most of the business logic. Jesteer also injects a few content scripts into your current tab, which initialize event listeners to listen for click and keypress events. The content scripts communicate with the service worker via message passing, so when a content script registers a click, for example, the script sends the service worker a message saying that the element with the provided CSS selector was clicked. The service worker then takes this information and adds the corresponding action to an actions queue. Finally, once you click “Stop recording,” the service worker goes through the queue and dynamically constructs a valid test suite. This test populates Jesteer’s text field, and also persists in your browser’s memory until you make a new test.

How is Jesteer different from other low-code testing tools?You might already be familiar with the built-in Chrome Recorder dev tool, which can also generate Puppeteer scripts. But Jesteer is different from Chrome Recorder in a few key ways:

• Jesteer is open-source, so you have direct access to our code and can contribute new features that you need.
• Chrome Recorder has a few bugs that Jesteer doesn’t, particularly with regard to typing. Chrome Recorder doesn’t handle complex typing well, for example typing a little into a box, clicking away, and typing a little more. (Try it out!)
• Jesteer uses a buffer to store keypresses, ensuring that what you type gets reflected exactly in the final script. Jesteer already pairs Puppeteer with a test runner, while Chrome Recorder just gives you a Puppeteer script. That means with Recorder, there’s an extra step of adjusting the generated script to fit inside of your test runner, while Jesteer streamlines the whole process, automatically integrating your Puppeteer script with Jest.
• Jesteer’s snapshot functionality is unique, and allows you to take targeted snapshots, removing the need to manually code what your test is expecting.

That’s all folks, and thanks for getting this far! The team behind Jesteer has had a blast ideating, developing, and launching this product, and we appreciate any comments you have for us. If you’d like to contribute, you can take a look at our GitHub repo, or feel free to shoot us an email at [e-mail]. (Check out our website too!)

Happy testing!

Jesteer | LinkedIn | Github | Website
Charissa Ramirez | LinkedIn | Github
Clare Cerullo | LinkedIn | Github
Katie Janzen | LinkedIn | Github
Tim Ruszala | LinkedIn | Github

*In order to handle page navigations, Jesteer needs permission to access any domain you might navigate to. That’s why when you download Jesteer, you’ll see an admittedly scary message warning you that Jesteer can access all your web data. We promise we never actually read any of that data, and we’re working on a way to limit what Jesteer can theoretically access. You can read our privacy policy here.