SharePoint Online UI Automation using Puppeteer and Docker
Published: 2019-11-18 10:20:12

UI automation helps you in great way to reduce manual testing every time you perform a deployment, also if you have a continuous integration and deployment in place it makes more sense to perform end to end tests regularly to be in full control of quality and customer satisfaction.

As SharePoint online development tools progressing towards modern tooling and practices like TypeScript, NodeJS, Gulp, WebPack, modern JavaScript frameworks and libraries, SharePoint development is becoming more streamlined and controlled.

Mostly UI Automation Tests which I have come across are based on PhantomJS browser which is actually a headless browser, as we have to run tests in Continuous Integration and Deployment pipeline. But what if you want to do more advanced scenarios inspect page, generate PDFs, page performance etc. Google has covered it for you with headless chrome and Puppeteer NodeJS api for controlling it. You can read more about it [here](https://medium.com/r/?url=https%3A%2F%2Fdevelopers.google.com%2Fweb%2Fupdates%2F2017%2F04%2Fheadless-chrome).

A simple scenario which I would like to test is to login to SharePoint online, validate that user has been logged in and a specific page exists in the pages library. I have already written an article about [Optimizing NodeJS application using Docker](https://dev.to/mtnomani/optimize-nodejs-applications-build-using-docker-4g25), so I will be using that as a base to show how we can run these tests inside docker container so that we have a consistent environment locally and during CI/CD pipeline.

I have posted a [Docker](https://medium.com/r/?url=https%3A%2F%2Fraw.githubusercontent.com%2Ftalha0113%2FBlogs%2Fmaster%2FSharePointOnlineUIAutomation%2FBase%2FDockerfile) file and [package.json](https://medium.com/r/?url=https%3A%2F%2Fraw.githubusercontent.com%2Ftalha0113%2FBlogs%2Fmaster%2FSharePointOnlineUIAutomation%2FBase%2Fpackage.json) file which you can use to build an image with all dependencies required to run tests. Build an image and push it to you favorite private registry Docker Hub or Azure Registry. I am using jest as test platform to execute and write tests with TypeScript. I got inspiration from [here](https://medium.com/r/?url=https%3A%2F%2Ffacebook.github.io%2Fjest%2Fdocs%2Fen%2Fpuppeteer.html).

Download the source code from [here](https://medium.com/r/?url=https%3A%2F%2Fgithub.com%2Ftalha0113%2FBlogs%2Ftree%2Fmaster%2FSharePointOnlineUIAutomation%2FDevelopment). Provide SharePoint online site URL, username and password in the [environment.ts](https://medium.com/r/?url=https%3A%2F%2Fraw.githubusercontent.com%2Ftalha0113%2FBlogs%2Fmaster%2FSharePointOnlineUIAutomation%2FDevelopment%2FConfigurations%2Fenvironment.config.ts) file. Replace "<Docker Puppeteer Image>" with docker base image which has been pushed to private repository in the [Docker file](https://medium.com/r/?url=https%3A%2F%2Fraw.githubusercontent.com%2Ftalha0113%2FBlogs%2Fmaster%2FSharePointOnlineUIAutomation%2FDevelopment%2FDockerfile). Execute following commands in PowerShell as I am using it on windows machine. I have used Azure registry for docker images so have to login first before pulling the image if you are using docker hub private registry than you don't need to do that. If you want to use Azure registry make sure replace the tokens in the commands with appropriate values

```bash
docker login "<Azure Private Registry Url>" –username "<UserName>" –password "<Password>" 
docker-compose –file ./docker-compose.yml -p puppeteerclientazure up 
–force-recreate –build –remove-orphans
docker logout "<Azure Private Registry Url"
```

You should be able to see the results of tests in PowerShell
![](https://cdn-images-1.medium.com/max/800/1*R6amcF9aQr28L5zymsxCLQ.png)

You should be able to execute all the tests in isolation inside docker container, you should use the same process in CI/CD pipeline by this way local development and testing is consistent with CI/CD pipeline. By this way we can catch issues as early as possible and achieve more quality.

Originally posted on [Medium Blog](https://medium.com/@MTNomani/sharepoint-online-ui-automation-using-puppeteer-and-docker-learning-space-on-wordpress-com-7168bbbfe027) Posting