Parroteer allows you to generate end-to-end tests simply by using your website. Pick the elements you want to watch for changes, interact with your page just as a user would, and have Puppeteer scripts generated for you with built in test assertions using Jest!
- Select specific elements on the page to observe for changes
- Record user interactions and changes that occur in tracked elements
- Auto-generation of Jest-Puppeteer tests
- View, edit, and copy or download generated code
You can find our extension in the Chrome Web Store and click "Add to Chrome". Then just pin Parroteer to your extension toolbar and you're ready to go!
Begin by navigating to the page you want to test, then click the Parroteer icon and select "Pick Elements". Now you can highlight and click the elements on the page that you want to watch for changes.
Once you're ready, you can go forward and start recording! Parroteer will begin tracking your clicks and key-presses on the page, and as any watched elements change, Parroteer will store these changes and create corresponding tests.
If say a new element appears on the page that you want to watch or maybe you realized you forgot one, just click the pause button in the extension popup and go back to pick more elements, then resume recording!
When you're all set, just find that friendly little parrot again in your extension bar and click the stop button. From there you can view, edit, and copy or export the Puppeteer scripts and Jest tests that are generated for you!
When you're ready to start a new recording session or if at any point you want to cancel your current one, all you need to do is click the restart button in the top right.
Configurations for running Jest-Puppeteer tests may vary, but for a basic setup, we recommend the following:
- Add the generated code as a
[filename].test.tsfile in your project's__tests__directory - Install Jest, Puppeteer, and Jest-Puppeteer via npm
- In your project's package.json, add the jest-puppeteer preset:
{
...
"jest": {
"preset": "jest-puppeteer"
}
}- Add a
package.jsonscript to run jest, or usenpx jestto run the tests!
There's a lot we'd love to (and plan to!) do with Parroteer! Here's what we've thought of so far:
- Buttons to deselect picked elements and remove recorded events
- Keep all selected elements highlighted while picking elements
- In-browser recording replays via the extension
- Replay controls such as pausing & stepping forward/back
- Saving and loading of previous tests using Chrome storage
- User settings such as:
- Allowing custom properties to be specified for observation
- Customization in how selectors are generated
- Toggle to watch for all DOM changes instead of specific elements
- Add additional DOM events that users can opt to listen for
- Toggle to include delays between user inputs in generated scripts (and replays)
We also know there are further improvements we can make in how element changes are tracked and how the corresponding tests are generated, as well as our codebase as a whole, so we'll keep making adjustments and smoothing things out wherever we can!
Alex Rokosz GitHub |
Alina Gasperino GitHub |
Eric Wells GitHub |
Erin Zhuang GitHub |
We welcome any and all contributions! If you would like to help out by adding new features or fixing issues, please do the following:
- Fork and clone our repository
- Run
npm installto install the necessary dependencies - Run
npm run build-watchto build the project and watch for changes - Follow the instructions on loading unpacked extensions in Chrome
- Make changes locally on a feature- or bugfix- branch
- Write unit tests for any new features or components that you create
- Use
npm testduring development to ensure changes are non-breaking - Finally when you're done, push your branch to your fork and create a pull request!
Whenever you make changes to your code while running the build-watch script, Webpack will automatically rebuild the project. However, in order to see these changes in your extension you must reload the extension in Chrome, then refresh any pages you wish to use it with so that the content scripts are reloaded as well.
We use a custom eslint configuration and would greatly appreciate that all contributors adhere to the defined styling rules, and please try to follow similar coding patterns as those you may see in this repository 🙂
This software is provided under the MIT License.