Play with Pinocchio, a new codeless test generator for Puppeteer!

Giao Tran
Pinocchio for Developers
3 min readFeb 3, 2021

--

Co-written by Adam Joesten, Brandi Richardson, Giao Tran, Harlan Evans, and Lex Choi

What is Pinocchio?
Pinocchio is a codeless test generator for Puppeteer with Mocha and Chai libraries. (Puppeteer is Chrome’s high level API that controls headless Chrome or Chromium.)

Download the Pinocchio app
View our Github Repository

Problem?
For developers who are interested in using Google’s powerful Puppeteer Node library specifically for testing purposes, they may have to initially spend some time parsing through the plethora of functionalities Google provides in order to identify which methods are most relevant to their testing goals.

Solution!
Pinocchio minimizes Puppeteer onboarding labor and isolates specific Puppeteer methods that are often used in testing in conjunction with Mocha and Chai. The result is a more seamless transition that allows users to dive right into these technologies, saving developers precious time and energy.

How to use Pinocchio:

  • From the landing page, the user will be able to input their application’s URL and upload their app code base.
Simply enter your application’s URL, upload your project directory, and you’re ready to get started!
  • Upon upload, the user will be able to 1) reference directories and files directly in the app itself using the file tree and code preview section powered by Monaco Editor and 2) use the Pinocchio test generation GUI to generate test code without having to touch any code editor.
  • Users have the option of generating one Describe statement that wraps their main test and are able to generate as many corresponding It statements as needed.
You can conveniently reference your code in Pinocchio while generating your tests.
  • Each It statement will correspond with any of the Puppeteer actions that the user selects as well as one Assertion statement.
  • When ready, simply click on “Export Test” in the navigation bar. That’s it!
Once you export your test file, you can even see it update live in your file tree.

As a fresh beta product, Pinocchio was developed for the open source community with the tech accelerator OSLabs. We encourage and welcome any feedback, stars, and suggestions on our Github.

Tech Stack
The Pinocchio team (endearingly known to each other as “Team Geppetto”), used the following tech stack:

Javascript, React (Context, Hooks, Router, Toastify), Express, Webpack, Electron, Typescript, HTML/CSS/SASS, Monaco Editor, Node.js, Jest, Enzyme, Styled-Components

Download the Pinocchio app
View our Github Repository

Meet the Co-Creators
⟹ Adam Joesten | Github | LinkedIn
⟹ Brandi Richardson | Github | LinkedIn
⟹ Giao (“Yao”) Tran | Github | LinkedIn
⟹ Harlan Evans | Github | LinkedIn
⟹ Lex Choi | Github | LinkedIn

Team Geppetto for the win!

--

--