O365Con18 - Implementing Automated UI Testing for SharePoint Solutions - Elio Struyf
1 like183 views
The document discusses implementing automated UI testing for SharePoint solutions. It recommends using tools like Puppeteer and Jest to automate browser actions and write tests. Puppeteer allows controlling Chrome programmatically to navigate pages, take screenshots, and interact with elements. Jest is a testing framework that can be used to write tests using Puppeteer. The document also provides tips for authenticating with SharePoint and detecting differences between pages using pixel matching.
![Simple element retrieval
/**
* Start of the other page tests
*/
test('Check if caption element is present in the web part', async (done) => {
const caption = await page.$('div[data-ui-test-id="caption"]’);
expect(caption).not.toBeNull();
done();
}, 5000);](https://image.slidesharecdn.com/o365connect-puppeteer-eliostruyf-181120120149/85/O365Con18-Implementing-Automated-UI-Testing-for-SharePoint-Solutions-Elio-Struyf-26-320.jpg)
O365Con18 - Implementing Automated UI Testing for SharePoint Solutions - Elio Struyf
- 1. Elio Struyf Architect @ Valo – MVP November 15th, 2018 Implementing automated UI testing for SharePoint solutions
- 4. Code analysis • Manual • JSLint / TSLint → Define code/analysis rules • Static analysis like SonarQube
- 5. Unit Tests
- 7. Automated UI Tests • Unit tests validate your code, UI tests validate that it actually works • Test your solution functionality • Test out time consuming actions • Check if your solution gets rendered correctly • Use tools like: • Coded UI Tests in Visual Studio • Selenium • Robot Framework • …
- 9. Puppeteer • High-level API to control Chrome / Chromium • Runs Chrome in headless mode (can be non-headless) • Full access over the DevTools Protocol • Can automate all manual browsers steps • Navigating • Taking screenshots / generating a PDF • Clicking on links / buttons / menu / … • Documentation: https://github.com/GoogleChrome/puppeteer • Install: npm i puppeteer
- 10. Puppeteer sample const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('https://www.eliostruyf.com’); await page.screenshot({path: 'example.png', fullPage: true}); await browser.close(); })();
- 11. Make tests easier with a recorder: https://github.com/checkly/puppeteer-recorder
- 13. Authenticate against SharePoint • Go through the whole authentication process • Use a library like: node-sp-auth • https://www.npmjs.com/package/node-sp-auth import * as spauth from 'node-sp-auth'; const data = await spauth.getAuth(pageUrl, { username: username, password: password });
- 14. Finding differences in your pictures
- 15. What changed between today and yesterday
- 16. Pixel matching https://github.com/mapbox/pixelmatch pixelmatch(img1.data, img2.data, diff.data, img1.width, img1.height, { threshold: 0.1 });
- 18. Jest testing framework • Zero configuration testing platform • Testing JavaScript based applications • Created by Facebook • Install: npm install jest @types/jest -D
- 19. Combining Puppeteer and Jest test('Should load the page', async (done) => { if (page) { await page.goto(configObj.pageUrl, { waitUntil: 'networkidle0’ }); expect(page).not.toBeNull(); expect(await page.title()).not.toBeNull(); expect(await page.title()).toBe("Automated UI Tests - Home"); done(); } }, 30000);
- 20. Combining Puppeteer and Jest /** * Start of the other page tests */ test('Check if caption element is present in the web part', async (done) => { const elm = await page.$('.caption’); expect(elm).not.toBeNull(); done(); }, 5000);
- 21. Wait! It’s not so easy!
- 23. Solution: work with data-* attributes
- 24. <div className={styles.caption} data-ui-test-id="caption"> <p data-ui-test-id="caption-title"> <b>{item.title}</b> </p> <p data-ui-test-id="caption-description"> <i>{item.description}</i> </p> </div>
- 26. Simple element retrieval /** * Start of the other page tests */ test('Check if caption element is present in the web part', async (done) => { const caption = await page.$('div[data-ui-test-id="caption"]’); expect(caption).not.toBeNull(); done(); }, 5000);
- 28. Questions?
- 29. Office Servers & Services MVP Azure / Office 365 / SharePoint @eliostruyf www.eliostruyf.com [email protected] Elio Struyf Architect