How to use takeScreenshot method in Webdriverio

Best JavaScript code snippet using webdriverio-monorepo

Run Webdriverio automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

Sign up Free
›
_
... View Documentation... View sample repo

TakeScreenshots.js

Source: TakeScreenshots.js Github

copy
1const chalk = require("chalk");
2const snakeCase = require("lodash/snakeCase");
3
4const takeScreenshot = function(browser, counter, name) {
5    let prefix = String(counter).padStart(2, "0");
6    let filename = `screens/${prefix}_${snakeCase(name)}.png`;
7    browser.pause(2000);
8    browser.saveScreenshot(filename, () => {
9        console.log(chalk.green("✔") + " Saved screenshot " + chalk.yellow(`'${filename}'`));
10    });
11};
12
13module.exports = {
14    "Take screenshots": (browser) => {
15        let i = 1;
16        let pageId = "";
17
18        browser.resizeWindow(1200, 1024);
19        browser.init();
20        browser.waitForElementVisible("body");
21
22        //----- Login page -----
23
24        pageId = "loginPage";
25
26        takeScreenshot(browser, i++, `${pageId}`);
27
28        browser.lskLogin();
29
30        //----- Invoice index page -----
31
32        pageId = "invoiceIndexPage";
33
34        takeScreenshot(browser, i++, `${pageId}`);
35
36        browser.lskClick(`#${pageId}MenuActivator`);
37        browser.lskClick(`#${pageId}AddInvoiceMenuItem`);
38        takeScreenshot(browser, i++, `${pageId}AddInvoiceDialog`);
39
40        browser.lskClick(`#${pageId}AddInvoiceDialogCancelButton`);
41        browser.lskClick(`#${pageId}Table tbody tr td:nth-child(9) .mdi-delete`);
42        takeScreenshot(browser, i++, `${pageId}DeleteInvoiceDialog`);
43
44        browser.lskClick(`#${pageId}DeleteInvoiceDialogCancelButton`);
45        browser.lskClick(`#${pageId}Table tbody tr td:nth-child(9) .mdi-monitor`);
46
47        //----- Invoice show page -----
48
49        pageId = "invoiceShowPage";
50
51        takeScreenshot(browser, i++, `${pageId}`);
52
53        browser.lskClick(`#${pageId}MenuActivator`);
54        browser.lskClick(`#${pageId}EditInvoiceMenuItem`);
55        takeScreenshot(browser, i++, `${pageId}EditInvoiceDialog`);
56
57        browser.lskClick(`#${pageId}EditInvoiceDialogCancelButton`);
58        browser.lskClick(`#${pageId}MenuActivator`);
59        browser.lskClick(`#${pageId}EditInvoiceCustomerMenuItem`);
60        takeScreenshot(browser, i++, `${pageId}EditInvoiceCustomerDialog`);
61
62        browser.lskClick(`#${pageId}EditInvoiceCustomerDialogCancelButton`);
63        browser.lskClick(`#${pageId}MenuActivator`);
64        browser.lskClick(`#${pageId}EditInvoiceBillerMenuItem`);
65        takeScreenshot(browser, i++, `${pageId}EditInvoiceBillerDialog`);
66
67        browser.lskClick(`#${pageId}EditInvoiceBillerDialogCancelButton`);
68        browser.lskClick(`#${pageId}InvoiceLineMenuActivator`);
69        browser.lskClick(`#${pageId}AddInvoiceLineMenuItem`);
70        takeScreenshot(browser, i++, `${pageId}AddInvoiceLineDialog`);
71
72        browser.lskClick(`#${pageId}AddInvoiceLineDialogCancelButton`);
73        browser.lskClick(`#${pageId}InvoiceLineTable tbody tr td:nth-child(7) .mdi-delete`);
74        takeScreenshot(browser, i++, `${pageId}DeleteInvoiceLineDialog`);
75
76        browser.lskClick(`#${pageId}DeleteInvoiceLineDialogCancelButton`);
77        browser.lskClick(`#${pageId}InvoiceLineTable tbody tr td:nth-child(7) .mdi-pencil`);
78        takeScreenshot(browser, i++, `${pageId}EditInvoiceLineDialog`);
79
80        browser.lskClick(`#${pageId}EditInvoiceLineDialogCancelButton`);
81        browser.lskClick(`#customerTab`);
82
83        //----- Customer index page -----
84
85        pageId = "customerIndexPage";
86
87        browser.lskClick(`#${pageId}Title`);
88        takeScreenshot(browser, i++, `${pageId}`);
89
90        browser.lskClick(`#${pageId}MenuActivator`);
91        browser.lskClick(`#${pageId}AddCustomerMenuItem`);
92        takeScreenshot(browser, i++, `${pageId}AddCustomerDialog`);
93
94        browser.lskClick(`#${pageId}AddCustomerDialogCancelButton`);
95        browser.lskClick(`#${pageId}Table tbody tr td:nth-child(5) .mdi-delete`);
96        takeScreenshot(browser, i++, `${pageId}DeleteCustomerDialog`);
97
98        browser.lskClick(`#${pageId}DeleteCustomerDialogCancelButton`);
99        browser.lskClick(`#${pageId}Table tbody tr td:nth-child(5) .mdi-monitor`);
100
101        //----- Customer show page -----
102
103        pageId = "customerShowPage";
104
105        takeScreenshot(browser, i++, `${pageId}`);
106
107        browser.lskClick(`#${pageId}MenuActivator`);
108        browser.lskClick(`#${pageId}EditCustomerMenuItem`);
109        takeScreenshot(browser, i++, `${pageId}EditCustomerDialog`);
110
111        browser.lskClick(`#${pageId}EditCustomerDialogCancelButton`);
112        browser.lskClick(`#billerTab`);
113
114        //----- Biller index page -----
115
116        pageId = "billerIndexPage";
117
118        browser.lskClick(`#${pageId}Title`);
119        takeScreenshot(browser, i++, `${pageId}`);
120
121        browser.lskClick(`#${pageId}MenuActivator`);
122        browser.lskClick(`#${pageId}AddBillerMenuItem`);
123        takeScreenshot(browser, i++, `${pageId}AddBillerDialog`);
124
125        browser.lskClick(`#${pageId}AddBillerDialogCancelButton`);
126        browser.lskClick(`#${pageId}Table tbody tr td:nth-child(7) .mdi-delete`);
127        takeScreenshot(browser, i++, `${pageId}DeleteBillerDialog`);
128
129        browser.lskClick(`#${pageId}DeleteBillerDialogCancelButton`);
130        browser.lskClick(`#${pageId}Table tbody tr td:nth-child(7) .mdi-monitor`);
131
132        //----- Biller show page -----
133
134        pageId = "billerShowPage";
135
136        takeScreenshot(browser, i++, `${pageId}`);
137
138        browser.lskClick(`#${pageId}MenuActivator`);
139        browser.lskClick(`#${pageId}EditBillerMenuItem`);
140        takeScreenshot(browser, i++, `${pageId}EditBillerDialog`);
141
142        browser.end();
143    },
144};
145
Full Screen
...

Source: TakeScreenshots.js Github

const chalk = require("chalk");
const snakeCase = require("lodash/snakeCase");

const takeScreenshot = function(browser, counter, name) {
    let prefix = String(counter).padStart(2, "0");
    let filename = `screens/${prefix}_${snakeCase(name)}.png`;
    browser.pause(2000);
    browser.saveScreenshot(filename, () => {
        console.log(chalk.green("✔") + " Saved screenshot " + chalk.yellow(`'${filename}'`));
    });
};

module.exports = {
    "Take screenshots": (browser) => {
        let i = 1;
        let pageId = "";

        browser.resizeWindow(1200, 1024);
        browser.init();
        browser.waitForElementVisible("body");

        //----- Login page -----

        pageId = "loginPage";

        takeScreenshot(browser, i++, `${pageId}`);

        browser.lskLogin();

        //----- Invoice index page -----

        pageId = "invoiceIndexPage";

        takeScreenshot(browser, i++, `${pageId}`);

        browser.lskClick(`#${pageId}MenuActivator`);
        browser.lskClick(`#${pageId}AddInvoiceMenuItem`);
        takeScreenshot(browser, i++, `${pageId}AddInvoiceDialog`);

        browser.lskClick(`#${pageId}AddInvoiceDialogCancelButton`);
        browser.lskClick(`#${pageId}Table tbody tr td:nth-child(9) .mdi-delete`);
        takeScreenshot(browser, i++, `${pageId}DeleteInvoiceDialog`);

        browser.lskClick(`#${pageId}DeleteInvoiceDialogCancelButton`);
        browser.lskClick(`#${pageId}Table tbody tr td:nth-child(9) .mdi-monitor`);

        //----- Invoice show page -----

        pageId = "invoiceShowPage";

        takeScreenshot(browser, i++, `${pageId}`);

        browser.lskClick(`#${pageId}MenuActivator`);
        browser.lskClick(`#${pageId}EditInvoiceMenuItem`);
        takeScreenshot(browser, i++, `${pageId}EditInvoiceDialog`);

        browser.lskClick(`#${pageId}EditInvoiceDialogCancelButton`);
        browser.lskClick(`#${pageId}MenuActivator`);
        browser.lskClick(`#${pageId}EditInvoiceCustomerMenuItem`);
        takeScreenshot(browser, i++, `${pageId}EditInvoiceCustomerDialog`);

        browser.lskClick(`#${pageId}EditInvoiceCustomerDialogCancelButton`);
        browser.lskClick(`#${pageId}MenuActivator`);
        browser.lskClick(`#${pageId}EditInvoiceBillerMenuItem`);
        takeScreenshot(browser, i++, `${pageId}EditInvoiceBillerDialog`);

        browser.lskClick(`#${pageId}EditInvoiceBillerDialogCancelButton`);
        browser.lskClick(`#${pageId}InvoiceLineMenuActivator`);
        browser.lskClick(`#${pageId}AddInvoiceLineMenuItem`);
        takeScreenshot(browser, i++, `${pageId}AddInvoiceLineDialog`);

        browser.lskClick(`#${pageId}AddInvoiceLineDialogCancelButton`);
        browser.lskClick(`#${pageId}InvoiceLineTable tbody tr td:nth-child(7) .mdi-delete`);
        takeScreenshot(browser, i++, `${pageId}DeleteInvoiceLineDialog`);

        browser.lskClick(`#${pageId}DeleteInvoiceLineDialogCancelButton`);
        browser.lskClick(`#${pageId}InvoiceLineTable tbody tr td:nth-child(7) .mdi-pencil`);
        takeScreenshot(browser, i++, `${pageId}EditInvoiceLineDialog`);

        browser.lskClick(`#${pageId}EditInvoiceLineDialogCancelButton`);
        browser.lskClick(`#customerTab`);

        //----- Customer index page -----

        pageId = "customerIndexPage";

        browser.lskClick(`#${pageId}Title`);
        takeScreenshot(browser, i++, `${pageId}`);

        browser.lskClick(`#${pageId}MenuActivator`);
        browser.lskClick(`#${pageId}AddCustomerMenuItem`);
        takeScreenshot(browser, i++, `${pageId}AddCustomerDialog`);

        browser.lskClick(`#${pageId}AddCustomerDialogCancelButton`);
        browser.lskClick(`#${pageId}Table tbody tr td:nth-child(5) .mdi-delete`);
        takeScreenshot(browser, i++, `${pageId}DeleteCustomerDialog`);

        browser.lskClick(`#${pageId}DeleteCustomerDialogCancelButton`);
        browser.lskClick(`#${pageId}Table tbody tr td:nth-child(5) .mdi-monitor`);

        //----- Customer show page -----

        pageId = "customerShowPage";

        takeScreenshot(browser, i++, `${pageId}`);

        browser.lskClick(`#${pageId}MenuActivator`);
        browser.lskClick(`#${pageId}EditCustomerMenuItem`);
        takeScreenshot(browser, i++, `${pageId}EditCustomerDialog`);

        browser.lskClick(`#${pageId}EditCustomerDialogCancelButton`);
        browser.lskClick(`#billerTab`);

        //----- Biller index page -----

        pageId = "billerIndexPage";

        browser.lskClick(`#${pageId}Title`);
        takeScreenshot(browser, i++, `${pageId}`);

        browser.lskClick(`#${pageId}MenuActivator`);
        browser.lskClick(`#${pageId}AddBillerMenuItem`);
        takeScreenshot(browser, i++, `${pageId}AddBillerDialog`);

        browser.lskClick(`#${pageId}AddBillerDialogCancelButton`);
        browser.lskClick(`#${pageId}Table tbody tr td:nth-child(7) .mdi-delete`);
        takeScreenshot(browser, i++, `${pageId}DeleteBillerDialog`);

        browser.lskClick(`#${pageId}DeleteBillerDialogCancelButton`);
        browser.lskClick(`#${pageId}Table tbody tr td:nth-child(7) .mdi-monitor`);

        //----- Biller show page -----

        pageId = "billerShowPage";

        takeScreenshot(browser, i++, `${pageId}`);

        browser.lskClick(`#${pageId}MenuActivator`);
        browser.lskClick(`#${pageId}EditBillerMenuItem`);
        takeScreenshot(browser, i++, `${pageId}EditBillerDialog`);

        browser.end();
    },
};

quality_assurance.js

Source: quality_assurance.js Github

copy
1import { Selector, t } from 'testcafe'
2
3import { ROOT_PATH } from '../src/utils/config'
4import { createUserRole } from '../testcafe/helpers/roles'
5import fetchSandbox from '../testcafe/helpers/sandboxes'
6
7fixture('Quality Assurance,').page(ROOT_PATH)
8
9test('captures d’écran de toutes les pages du site', async () => {
10  await takeScreenshot('connexion')
11  await takeScreenshot('mot-de-passe-perdu')
12  await takeScreenshot('inscription')
13  await takeScreenshot('inscription/confirmation')
14
15  const { user } = await fetchSandbox(
16    'pro_03_offerers',
17    'get_existing_pro_validated_user_with_validated_offerer_validated_user_offerer'
18  )
19  await t.useRole(createUserRole(user))
20
21  await takeScreenshot('404')
22  await t
23    .navigateTo('/accueil')
24    .takeScreenshot(optionsOfScreenshot('accueil'))
25    .click(Selector('button').withText('Fred Leopold'))
26    .takeScreenshot(optionsOfScreenshot('menu'))
27  const token = Selector('label').withText('Contremarque')
28  await t
29    .navigateTo('/guichet')
30    .typeText(token, 'FAAKEE', { replace: true })
31    .takeScreenshot(optionsOfScreenshot('guichet-FAAKEE'))
32  await t
33    .navigateTo('/guichet')
34    .typeText(token, '100004', { replace: true })
35    .takeScreenshot(optionsOfScreenshot('guichet'))
36  await t
37    .navigateTo('/offres')
38    .click(Selector('input[type="checkbox"]'))
39    .click(Selector('.field-date-end .period-filter-input'))
40    .takeScreenshot(optionsOfScreenshot('offres'))
41    .typeText(Selector('label').withText('Nom de l’offre ou ISBN'), 'search without result')
42    .click(Selector('button').withText('Lancer la recherche'))
43    .takeScreenshot(optionsOfScreenshot('offres-search-without-result'))
44  await t
45    .navigateTo('/offres')
46    .click(Selector('table a'))
47    .takeScreenshot(optionsOfScreenshot('offre-edition'))
48    .click(Selector('.of-placeholder'))
49    .click(Selector('.tna-toggle'))
50    .takeScreenshot(optionsOfScreenshot('thumbnail-upload-from-computer'))
51    .click(Selector('.thumbnail-dialog .bc-step:not(.active) a'))
52    .takeScreenshot(optionsOfScreenshot('thumbnail-upload-from-url'))
53    .typeText(
54      Selector('.thumbnail-dialog .tnf-form input[name="url"]'),
55      'https://pass.culture.fr/wp-content/uploads/2020/11/N_PASS_CULTURE_HD.png'
56    )
57    .click(Selector('.thumbnail-dialog .tnf-url-button'))
58    .takeScreenshot(optionsOfScreenshot('thumbnail-credit'))
59    .click(Selector('.thumbnail-dialog .tnd-actions .primary-button'))
60    .takeScreenshot(optionsOfScreenshot('thumbnail-image-editor'))
61    .click(Selector('.thumbnail-dialog .tnd-actions .primary-button'))
62    .takeScreenshot(optionsOfScreenshot('thumbnail-preview'))
63    .click(Selector('.thumbnail-dialog .tnd-actions .primary-button'))
64    .click(Selector('a').withText('Stock et prix'))
65    .takeScreenshot(optionsOfScreenshot('offre-stocks'))
66  await t
67    .navigateTo('/offres/creation')
68    .click(Selector('select').withText('Choisir un type'))
69    .click(Selector('select option').withText('Jeux - abonnements'))
70    .typeText(Selector('label').withText("Titre de l'offre"), 'Un titre d’offre')
71    .click(Selector('select').withText('Sélectionnez une structure'))
72    .click(Selector('select option').withText('Club Dorothy'))
73    .click(Selector('select').withText('Sélectionnez un lieu'))
74    .click(Selector('select option').withText('Maison de la Brique'))
75    .typeText(Selector('label').withText('URL d’accès à l’offre'), 'https://example.com')
76    .click(Selector('input[name="noDisabilityCompliant"]'))
77    .takeScreenshot(optionsOfScreenshot('offre-creation'))
78    .click(Selector('button').withText('Enregistrer et passer aux stocks'))
79    .click(Selector('button').withText('Ajouter un stock'))
80    .takeScreenshot(optionsOfScreenshot('offre-stocks'))
81    .click(Selector('button').withText('Enregistrer'))
82    .takeScreenshot(optionsOfScreenshot('offre-confirmation'))
83  await t
84    .navigateTo('/reservations')
85    .click(Selector('img[alt="Filtrer par statut"]'))
86    .takeScreenshot(optionsOfScreenshot('reservations'))
87    .typeText(Selector(`input[placeholder="Rechercher par nom d'offre"]`), 'search without result')
88    .takeScreenshot(optionsOfScreenshot('reservations-search-without-result'))
89  await t
90    .navigateTo('/profil')
91    .takeScreenshot(optionsOfScreenshot('profil'))
92    .click(Selector('button').withText('Enregistrer'))
93    .takeScreenshot(optionsOfScreenshot('profil-success-banner'))
94  await t
95    .navigateTo('/structures')
96    .takeScreenshot(optionsOfScreenshot('structures'))
97    .click(Selector('a').withText('Club Dorothy'))
98    .takeScreenshot(optionsOfScreenshot('structure'))
99    .click(Selector('a').withText('+ Ajouter un lieu'))
100    .takeScreenshot(optionsOfScreenshot('lieu-creation'))
101    .click(Selector('button').withText('Annuler'))
102    .click(Selector('a').withText('Maison de la Brique'))
103    .takeScreenshot(optionsOfScreenshot('lieu'))
104    .click(Selector('a').withText('Modifier le lieu'))
105    .takeScreenshot(optionsOfScreenshot('lieu-edition'))
106  await takeScreenshot('structures?mots-cles=search-without-result')
107  await takeScreenshot('structures/creation')
108  await takeScreenshot('styleguide')
109  await takeScreenshot('remboursements')
110  // TODO: Pourquoi vois-je du JS ?
111  await takeScreenshot('remboursements/detail')
112})
113
114const takeScreenshot = async path => {
115  await t.navigateTo(`/${path}`).takeScreenshot(optionsOfScreenshot(path))
116}
117
118const optionsOfScreenshot = path => ({
119  path: `branch/${path.replace(/(\/|\?|=)/g, '-')}.png`,
120  fullPage: true,
121})
122
Full Screen
...

Source: quality_assurance.js Github

import { Selector, t } from 'testcafe'

import { ROOT_PATH } from '../src/utils/config'
import { createUserRole } from '../testcafe/helpers/roles'
import fetchSandbox from '../testcafe/helpers/sandboxes'

fixture('Quality Assurance,').page(ROOT_PATH)

test('captures d’écran de toutes les pages du site', async () => {
  await takeScreenshot('connexion')
  await takeScreenshot('mot-de-passe-perdu')
  await takeScreenshot('inscription')
  await takeScreenshot('inscription/confirmation')

  const { user } = await fetchSandbox(
    'pro_03_offerers',
    'get_existing_pro_validated_user_with_validated_offerer_validated_user_offerer'
  )
  await t.useRole(createUserRole(user))

  await takeScreenshot('404')
  await t
    .navigateTo('/accueil')
    .takeScreenshot(optionsOfScreenshot('accueil'))
    .click(Selector('button').withText('Fred Leopold'))
    .takeScreenshot(optionsOfScreenshot('menu'))
  const token = Selector('label').withText('Contremarque')
  await t
    .navigateTo('/guichet')
    .typeText(token, 'FAAKEE', { replace: true })
    .takeScreenshot(optionsOfScreenshot('guichet-FAAKEE'))
  await t
    .navigateTo('/guichet')
    .typeText(token, '100004', { replace: true })
    .takeScreenshot(optionsOfScreenshot('guichet'))
  await t
    .navigateTo('/offres')
    .click(Selector('input[type="checkbox"]'))
    .click(Selector('.field-date-end .period-filter-input'))
    .takeScreenshot(optionsOfScreenshot('offres'))
    .typeText(Selector('label').withText('Nom de l’offre ou ISBN'), 'search without result')
    .click(Selector('button').withText('Lancer la recherche'))
    .takeScreenshot(optionsOfScreenshot('offres-search-without-result'))
  await t
    .navigateTo('/offres')
    .click(Selector('table a'))
    .takeScreenshot(optionsOfScreenshot('offre-edition'))
    .click(Selector('.of-placeholder'))
    .click(Selector('.tna-toggle'))
    .takeScreenshot(optionsOfScreenshot('thumbnail-upload-from-computer'))
    .click(Selector('.thumbnail-dialog .bc-step:not(.active) a'))
    .takeScreenshot(optionsOfScreenshot('thumbnail-upload-from-url'))
    .typeText(
      Selector('.thumbnail-dialog .tnf-form input[name="url"]'),
      'https://pass.culture.fr/wp-content/uploads/2020/11/N_PASS_CULTURE_HD.png'
    )
    .click(Selector('.thumbnail-dialog .tnf-url-button'))
    .takeScreenshot(optionsOfScreenshot('thumbnail-credit'))
    .click(Selector('.thumbnail-dialog .tnd-actions .primary-button'))
    .takeScreenshot(optionsOfScreenshot('thumbnail-image-editor'))
    .click(Selector('.thumbnail-dialog .tnd-actions .primary-button'))
    .takeScreenshot(optionsOfScreenshot('thumbnail-preview'))
    .click(Selector('.thumbnail-dialog .tnd-actions .primary-button'))
    .click(Selector('a').withText('Stock et prix'))
    .takeScreenshot(optionsOfScreenshot('offre-stocks'))
  await t
    .navigateTo('/offres/creation')
    .click(Selector('select').withText('Choisir un type'))
    .click(Selector('select option').withText('Jeux - abonnements'))
    .typeText(Selector('label').withText("Titre de l'offre"), 'Un titre d’offre')
    .click(Selector('select').withText('Sélectionnez une structure'))
    .click(Selector('select option').withText('Club Dorothy'))
    .click(Selector('select').withText('Sélectionnez un lieu'))
    .click(Selector('select option').withText('Maison de la Brique'))
    .typeText(Selector('label').withText('URL d’accès à l’offre'), 'https://example.com')
    .click(Selector('input[name="noDisabilityCompliant"]'))
    .takeScreenshot(optionsOfScreenshot('offre-creation'))
    .click(Selector('button').withText('Enregistrer et passer aux stocks'))
    .click(Selector('button').withText('Ajouter un stock'))
    .takeScreenshot(optionsOfScreenshot('offre-stocks'))
    .click(Selector('button').withText('Enregistrer'))
    .takeScreenshot(optionsOfScreenshot('offre-confirmation'))
  await t
    .navigateTo('/reservations')
    .click(Selector('img[alt="Filtrer par statut"]'))
    .takeScreenshot(optionsOfScreenshot('reservations'))
    .typeText(Selector(`input[placeholder="Rechercher par nom d'offre"]`), 'search without result')
    .takeScreenshot(optionsOfScreenshot('reservations-search-without-result'))
  await t
    .navigateTo('/profil')
    .takeScreenshot(optionsOfScreenshot('profil'))
    .click(Selector('button').withText('Enregistrer'))
    .takeScreenshot(optionsOfScreenshot('profil-success-banner'))
  await t
    .navigateTo('/structures')
    .takeScreenshot(optionsOfScreenshot('structures'))
    .click(Selector('a').withText('Club Dorothy'))
    .takeScreenshot(optionsOfScreenshot('structure'))
    .click(Selector('a').withText('+ Ajouter un lieu'))
    .takeScreenshot(optionsOfScreenshot('lieu-creation'))
    .click(Selector('button').withText('Annuler'))
    .click(Selector('a').withText('Maison de la Brique'))
    .takeScreenshot(optionsOfScreenshot('lieu'))
    .click(Selector('a').withText('Modifier le lieu'))
    .takeScreenshot(optionsOfScreenshot('lieu-edition'))
  await takeScreenshot('structures?mots-cles=search-without-result')
  await takeScreenshot('structures/creation')
  await takeScreenshot('styleguide')
  await takeScreenshot('remboursements')
  // TODO: Pourquoi vois-je du JS ?
  await takeScreenshot('remboursements/detail')
})

const takeScreenshot = async path => {
  await t.navigateTo(`/${path}`).takeScreenshot(optionsOfScreenshot(path))
}

const optionsOfScreenshot = path => ({
  path: `branch/${path.replace(/(\/|\?|=)/g, '-')}.png`,
  fullPage: true,
})

page.spec.js

Source: page.spec.js Github

copy
1const navigationPage = require("../page-objects/navigation-page");
2const pagePageObject = require("../page-objects/page-page");
3const faker = require("faker");
4const config = require("../credentials");
5const fs = require("fs");
6
7describe("Create Page", () => {
8  const pathImages = "../Results/Puppeteer/v3.42.5/CreatePage";
9
10  beforeAll(async () => {
11    await fs.promises.rmdir(pathImages, { recursive: true });
12    await fs.promises.mkdir(pathImages, { recursive: true });
13
14    jest.setTimeout(50000);
15    await navigationPage.navigate(page);
16    await navigationPage.login(page, config.user, config.password);
17    await page.screenshot({
18      path: `${pathImages}/homepage.jpg`,
19    });
20  });
21
22  // beforeEach(async () => {
23  //   jest.setTimeout(50000);
24  //   await navigationPage.navigate(page);
25  //   await navigationPage.login(page, config.user, config.password);
26  // });
27
28  // afterEach(async () => {
29  //   await navigationPage.logout(page);
30  // });
31
32  it("Create Page and publish it successfully", async () => {
33    const pageTitle = faker.random.word();
34    const pageContent = faker.lorem.lines(1);
35
36    let counter = 0;
37    const slug = "PageCreated";
38
39    async function takeScreenshot(slug) {
40      await page.screenshot({
41        path: `${pathImages}/${slug}${counter++}.jpg`,
42      });
43    }
44
45    await pagePageObject.createPage(page, slug, takeScreenshot);
46    await pagePageObject.addContent(
47      page,
48      pageTitle,
49      pageContent,
50      slug,
51      takeScreenshot
52    );
53    await pagePageObject.publishPage(page, slug, takeScreenshot);
54
55    await expect(page).toMatch("Published");
56
57    await page.click('a[href="#/pages/"]');
58    await new Promise((r) => setTimeout(r, 1000));
59    await page.click(".gh-notification-close");
60
61    await expect(page).toMatch(pageTitle);
62  });
63
64  it("Create Page and schedule it successfully", async () => {
65    const pageTitle = faker.random.word();
66    const pageContent = faker.lorem.lines(1);
67
68    let counter = 0;
69    const slug = "PageScheduled";
70
71    async function takeScreenshot(slug) {
72      await page.screenshot({
73        path: `${pathImages}/${slug}${counter++}.jpg`,
74      });
75    }
76
77    await pagePageObject.createPage(page, slug, takeScreenshot);
78    await pagePageObject.addContent(
79      page,
80      pageTitle,
81      pageContent,
82      slug,
83      takeScreenshot
84    );
85    await pagePageObject.schedulePage(page, slug, takeScreenshot);
86
87    await expect(page).toMatch("Scheduled");
88
89    await page.click('a[href="#/pages/"]');
90    await new Promise((r) => setTimeout(r, 1000));
91    await page.click(".gh-notification-close");
92
93    await expect(page).toMatch(pageTitle);
94  });
95
96  it("Create draft Page", async () => {
97    const pageTitle = faker.random.word();
98    const pageContent = faker.lorem.lines(1);
99
100    let counter = 0;
101    const slug = "PageDraft";
102
103    async function takeScreenshot(slug) {
104      await page.screenshot({
105        path: `${pathImages}/${slug}${counter++}.jpg`,
106      });
107    }
108
109    await pagePageObject.createPage(page, slug, takeScreenshot);
110    await pagePageObject.addContent(
111      page,
112      pageTitle,
113      pageContent,
114      slug,
115      takeScreenshot
116    );
117
118    await page.click('a[href="#/pages/"]');
119    await new Promise((r) => setTimeout(r, 1000));
120
121    await expect(page).toMatch(pageTitle);
122  });
123
124  it("Create Page, try to edit the first page but discard changes", async () => {
125    const pageTitle = faker.random.word();
126    const pageContent = faker.lorem.lines(1);
127
128    const pageTitleEdit = faker.random.word();
129
130    let counter = 0;
131    const slug = "PageDiscardChanges";
132
133    async function takeScreenshot(slug) {
134      await page.screenshot({
135        path: `${pathImages}/${slug}${counter++}.jpg`,
136      });
137    }
138
139    await pagePageObject.createPage(page, slug, takeScreenshot);
140    await pagePageObject.addContent(
141      page,
142      pageTitle,
143      pageContent,
144      slug,
145      takeScreenshot
146    );
147    await pagePageObject.publishPage(page, slug, takeScreenshot);
148
149    await expect(page).toMatch("Published");
150
151    await page.click('a[href="#/pages/"]');
152    await new Promise((r) => setTimeout(r, 1000));
153    await page.click(".gh-notification-close");
154
155    await expect(page).toMatch(pageTitle);
156
157    await pagePageObject.selectFirstPageFromList(page, slug, takeScreenshot);
158
159    await pagePageObject.addContent(
160      page,
161      pageTitleEdit,
162      null,
163      slug,
164      takeScreenshot
165    );
166    await pagePageObject.discardChanges(page, slug, takeScreenshot);
167  });
168});
169
Full Screen
...

Source: page.spec.js Github

const navigationPage = require("../page-objects/navigation-page");
const pagePageObject = require("../page-objects/page-page");
const faker = require("faker");
const config = require("../credentials");
const fs = require("fs");

describe("Create Page", () => {
  const pathImages = "../Results/Puppeteer/v3.42.5/CreatePage";

  beforeAll(async () => {
    await fs.promises.rmdir(pathImages, { recursive: true });
    await fs.promises.mkdir(pathImages, { recursive: true });

    jest.setTimeout(50000);
    await navigationPage.navigate(page);
    await navigationPage.login(page, config.user, config.password);
    await page.screenshot({
      path: `${pathImages}/homepage.jpg`,
    });
  });

  // beforeEach(async () => {
  //   jest.setTimeout(50000);
  //   await navigationPage.navigate(page);
  //   await navigationPage.login(page, config.user, config.password);
  // });

  // afterEach(async () => {
  //   await navigationPage.logout(page);
  // });

  it("Create Page and publish it successfully", async () => {
    const pageTitle = faker.random.word();
    const pageContent = faker.lorem.lines(1);

    let counter = 0;
    const slug = "PageCreated";

    async function takeScreenshot(slug) {
      await page.screenshot({
        path: `${pathImages}/${slug}${counter++}.jpg`,
      });
    }

    await pagePageObject.createPage(page, slug, takeScreenshot);
    await pagePageObject.addContent(
      page,
      pageTitle,
      pageContent,
      slug,
      takeScreenshot
    );
    await pagePageObject.publishPage(page, slug, takeScreenshot);

    await expect(page).toMatch("Published");

    await page.click('a[href="#/pages/"]');
    await new Promise((r) => setTimeout(r, 1000));
    await page.click(".gh-notification-close");

    await expect(page).toMatch(pageTitle);
  });

  it("Create Page and schedule it successfully", async () => {
    const pageTitle = faker.random.word();
    const pageContent = faker.lorem.lines(1);

    let counter = 0;
    const slug = "PageScheduled";

    async function takeScreenshot(slug) {
      await page.screenshot({
        path: `${pathImages}/${slug}${counter++}.jpg`,
      });
    }

    await pagePageObject.createPage(page, slug, takeScreenshot);
    await pagePageObject.addContent(
      page,
      pageTitle,
      pageContent,
      slug,
      takeScreenshot
    );
    await pagePageObject.schedulePage(page, slug, takeScreenshot);

    await expect(page).toMatch("Scheduled");

    await page.click('a[href="#/pages/"]');
    await new Promise((r) => setTimeout(r, 1000));
    await page.click(".gh-notification-close");

    await expect(page).toMatch(pageTitle);
  });

  it("Create draft Page", async () => {
    const pageTitle = faker.random.word();
    const pageContent = faker.lorem.lines(1);

    let counter = 0;
    const slug = "PageDraft";

    async function takeScreenshot(slug) {
      await page.screenshot({
        path: `${pathImages}/${slug}${counter++}.jpg`,
      });
    }

    await pagePageObject.createPage(page, slug, takeScreenshot);
    await pagePageObject.addContent(
      page,
      pageTitle,
      pageContent,
      slug,
      takeScreenshot
    );

    await page.click('a[href="#/pages/"]');
    await new Promise((r) => setTimeout(r, 1000));

    await expect(page).toMatch(pageTitle);
  });

  it("Create Page, try to edit the first page but discard changes", async () => {
    const pageTitle = faker.random.word();
    const pageContent = faker.lorem.lines(1);

    const pageTitleEdit = faker.random.word();

    let counter = 0;
    const slug = "PageDiscardChanges";

    async function takeScreenshot(slug) {
      await page.screenshot({
        path: `${pathImages}/${slug}${counter++}.jpg`,
      });
    }

    await pagePageObject.createPage(page, slug, takeScreenshot);
    await pagePageObject.addContent(
      page,
      pageTitle,
      pageContent,
      slug,
      takeScreenshot
    );
    await pagePageObject.publishPage(page, slug, takeScreenshot);

    await expect(page).toMatch("Published");

    await page.click('a[href="#/pages/"]');
    await new Promise((r) => setTimeout(r, 1000));
    await page.click(".gh-notification-close");

    await expect(page).toMatch(pageTitle);

    await pagePageObject.selectFirstPageFromList(page, slug, takeScreenshot);

    await pagePageObject.addContent(
      page,
      pageTitleEdit,
      null,
      slug,
      takeScreenshot
    );
    await pagePageObject.discardChanges(page, slug, takeScreenshot);
  });
});

Accelerate Your Automation Test Cycles With LambdaTest

Leverage LambdaTest’s cloud-based platform to execute your automation tests in parallel and trim down your test execution time significantly. Your first 100 automation testing minutes are on us.

Claim Now
Try LambdaTest

Run JavaScript Tests on LambdaTest Cloud Grid

Execute automation tests with Webdriverio on a cloud-based Grid of 3000+ real browsers and operating systems for both web and mobile applications.

Test now for Free
LambdaTestX

We use cookies to give you the best experience. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. Learn More in our Cookies policy, Privacy & Terms of service

Allow Cookie
Sarah

I hope you find the best code examples for your project.

If you want to accelerate automated browser testing, try LambdaTest. Your first 100 automation testing minutes are FREE.

Sarah Elson (Product & Growth Lead)

Sign up nowX