Puppeteer is a Node API to drive Headless Chrome. I have used Selenium and DalekJS in the past to do some UI testing. I have been experimenting/learning puppeteer for the past few weeks and have found it to relatively easy to learn and use. It is still on alpha though and so there are some bugs.
In my sample repo (https://github.com/rajyraman/Puppeteer-Dynamics-365), I demonstrate:
- How to use puppeteer to login to ADFS OnPrem CRM
- How to use puppeteer to take full page screenshot
- Annotate the screenshot using imagemagick
I envision this repo to provide documentation assistance by capturing and annotating screenshots. Below are the steps to run this project:
- After cloning the github repo run the following command to download the npm packages: yarn
- Install imagemagick from https://www.imagemagick.org/script/download.php#windows
- Confirm that the path to magick.exe exists in PATH
- Create a new .env file in the root of the repo. Below is the .env file that I used: OnPrem
- Change the USER_SELECTOR, PASSWORD_SELECTOR, LOGIN_SUBMIT_SELECTOR if they are different. These were the ids in the OnPrem ADFS login page
- Check the runsheet.csv file provided in the repo and change it to suit your screenshot requirements. The run sheet specifies the sequence of clicks. In this file, on line 2, I am specifying that I should first click Workspace group and then Clients subgroup. The screenshot should be annotated with text “Clients list”. On line 3, I am specifying that the “NEW” button should be clicked and the screenshot should be annotated as “New client form” and the file name should be “New Client Form.png”. The command bar clicks are always specified in a new line with blank group and subgroup.
- Run the node application using “node index.js”
The screenshots will be captured with headless Chrome and annotated using imagemagick. Here is a sample screenshot:
Possible future improvements:
- Build the exe using pkg and distribute the exe, .env and runsheet.csv. Building the exe using pkg requires a copy of the puppeteer folder from node_modules along side the exe
- Navigate to a record based on id
- Run workflow/dialogs
- Populate new entity form with data before command bar button click
- Automatically scroll if group is outside of viewport
Please submit your feedback/ideas/criticism on the comments area or as a issue in the repo.