How to start UI automation in 15 mins with Puppeteer

1. How to start UI automation
in 15 mins
with Puppeteer
and
why you will like it

2. menti.com
717822

3. ● How to start automation in 15 mins
● Tips on start
● Puppeteer features
Plan

4. ~$ whoami
> Oleksandr Pelykh
● QA at SocialTech
● 5 years experience in QA
● ISTQB / ISTQB Agile certified
● 3 companies during last 2 years

6. IDE
Visual Studio Code
Node.js and npm
Preconditions:

7. Let’s start from scratch

9. VIDEO 1

10. https://github.com/puppeteer/puppeteer#getting-started
Installation
To use Puppeteer in your
project, run:
npm i puppeteer

11. VIDEO 2

12. Chromium is downloaded
automatically
Chrome driver
Version?
Version?
Version?

13. const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://google.com');
await page.screenshot({path: 'example.png'});
await browser.close();
})();
https://github.com/puppeteer/puppeteer#usage

14. VIDEO 3

16. Where is browser?

17. const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({
headless: false, slowMo: 200
});
const page = await browser.newPage();
await page.goto('https://google.com');
await page.screenshot({path: 'example.png'});
await browser.close();
})();

18. VIDEO 4

19. const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({
headless: false, slowMo: 200
});
const page = await browser.newPage();
await page.goto('https://google.com');
await page.type('[name="q"]', 'selenium camp');
await page.keyboard.press('Enter');
await page.waitForSelector('.LC20lb');
await browser.close();
})();
Extend test

20. VIDEO 5

21. Basic syntax
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://google.com');
await page.waitForSelector('element');

22. await page.type('element', 'text');
await page.click('button');
const frames = page.frames();
await page.screenshot({path: 'example.png'});
await browser.close();

23. I-st test
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({headless: false, slowMo: 200});
const page = await browser.newPage();
await page.goto('https://google.com');
await page.type('[name="q"]', 'selenium camp');
await page.keyboard.press('Enter');
await page.waitForSelector('.LC201b');
II-nd test
await page.goto('https://google.com');
await page.type('[name="q"]', 'selenium camp');
await page.click('name=[“btnK”]');
await page.waitForSelector('.LC201b');
await browser.close();
})();
2 tests

24. VIDEO 6

25. What if we have 10 tests?

26. We need test runner
npm i jest
=

27. const puppeteer = require('puppeteer');
let browser, page;
beforeAll(async() => {
browser = await puppeteer.launch({headless: false, slowMo: 200});
page = await browser.newPage();
});
describe('Google search', () => {
test('search by press Enter', async() => {
await page.goto('https://google.com');
await page.type('[name="q"]', 'selenium camp');
await page.keyboard.press('Enter');
await page.waitForSelector('.LC201b');
});
test('search by click Search button', async() => {
await page.goto('https://google.com');
await page.type('[name="q"]', 'selenium camp');
await page.click('name=[“btnK”]');
await page.waitForSelector(.LC201b);
await browser.close();
});
});

28. VIDEO 7

31. Don’t try to make a perfect automation

32. You don’t need on start
automate everything routine actions>

33. You don’t need on start
* if your project is not specific
cross-browser support Chrome is enough
>

34. cool external reporter
You don’t need on start
> default is pretty good

35. fast tests
You don’t need on start
> few minutes for full flow UI
test is ok

36. page objects
You don’t need on start
> functional programming
is enough

37. Puppeteer features

38. Execute JS on the page
await page.evaluate(() => alert('this is test'));

39. VIDEO 8

40. Intercept console messages
page.on('console', message => console.log(message.text()));

41. VIDEO 9

42. const browser = await puppeteer.launch({
headless: false,
slowMo: 200,
devtools: true
});

43. Device emulation
await page.emulate(
puppeteer.devices['iPhone X']
);

44. VIDEO 10

46. Test chrome extensions
const browser = await puppeteer.launch({
headless: false,
args: [
'--disable-extensions-except={path_to_extension}',
'--load-extension={path_to_extension}'
]
});

47. VIDEO 11

48. Intercept request/response
page.on('request', interceptedRequest => {
if (interceptedRequest.resourceType() === 'image') {
interceptedRequest.abort();
}
else {
interceptedRequest.continue();
}
});

49. VIDEO 12

50. Pixel perfect

51. VIDEO 13

53. What to do next
Explore puppeteer
Get acquainted closely with Jest
Learn test automation patterns

54. Вы всё ещё не автоматизируете?