How to use waitForLoadState method in Playwright Internal

1// Copyright 2022 the Kubeapps contributors.
2// SPDX-License-Identifier: Apache-2.0
3
4const utils = require("./util-functions");
5
6exports.KubeappsLogin = class KubeappsLogin {
7  constructor(page) {
8    this.page = page;
9    this.oidc = process.env.USE_MULTICLUSTER_OIDC_ENV === "true";
10    this.token = "";
11  }
12
13  isOidc = () => this.oidc;
14
15  setToken(token) {
16    let bearerMatch = token.match(/Bearer/g);
17    if (bearerMatch && bearerMatch.length > 1) {
18      token = token.split(",")[0];
19    }
20    this.token = token.trim().startsWith("Bearer") ? token.trim().substring(7) : token;
21  }
22
23  async doLogin(username, pwd, token) {
24    if (this.oidc) {
25      this.page.on("response", response => {
26        // retrieves the token after the oidc flow, note this require "--set-authorization-header=true" flag to be enabled in oauth2proxy
27        let oidcToken = response.headers()["authorization"];
28        if (oidcToken) this.setToken(oidcToken);
29      });
30      await this.doOidcLogin(username, pwd);
31    } else if (token) {
32      this.setToken(token);
33      await this.doTokenLogin(token);
34    } else {
35      console.log("ERROR: No valid login data provided.");
36      return;
37    }
38    console.log("Logged into Kubeapps!");
39  }
40
41  async doLogout() {
42    console.log("Logging out of Kubeapps");
43    await this.page.click(".dropdown.kubeapps-menu .kubeapps-nav-link");
44    await this.page.click('cds-button:has-text("Log out")');
45    await this.page.waitForLoadState("networkidle");
46    console.log("Logged out of Kubeapps");
47  }
48
49  async doOidcLogin(username, pwd) {
50    console.log(`Logging in Kubeapps via OIDC in host: ${utils.getUrl("/")}`);
51
52    // Go to Home page
53    await this.page.goto(utils.getUrl("/"));
54    await this.page.waitForLoadState("networkidle");
55
56    // Click to Log in with OIDC provider
57    await this.page.click("text=Login via OIDC Provider");
58    await this.page.waitForLoadState("networkidle");
59
60    // Click to Log in with Email
61    await this.page.click("text=Log in with Email");
62    await this.page.waitForLoadState("networkidle");
63
64    // Type in credentials
65    await this.page.fill('input[id="login"]', username);
66    await this.page.fill('input[id="password"]', pwd);
67    await this.page.click("#submit-login");
68    await this.page.waitForLoadState("networkidle");
69    await this.page.waitForLoadState("domcontentloaded");
70
71    // Confirm Grant Access
72    await this.page.locator('button.dex-btn:has-text("Grant Access")').click();
73    await this.page.waitForLoadState("networkidle");
74    await this.page.waitForLoadState("domcontentloaded");
75  }
76
77  async doTokenLogin(token) {
78    console.log(`Logging in Kubeapps using token in host: ${utils.getUrl("/")}`);
79
80    // Go to Home page
81    await this.page.goto(utils.getUrl("/"));
82    await this.page.waitForLoadState("networkidle");
83
84    const inputLocator = this.page.locator("form input[name=token]");
85    await inputLocator.fill(token);
86    await this.page.click("#login-submit-button");
87
88    await this.page.waitForLoadState("networkidle");
89    await this.page.waitForLoadState("domcontentloaded");
90  }
91};
92

Source: kubeapps-login.js

// Copyright 2022 the Kubeapps contributors.
// SPDX-License-Identifier: Apache-2.0

const utils = require("./util-functions");

exports.KubeappsLogin = class KubeappsLogin {
  constructor(page) {
    this.page = page;
    this.oidc = process.env.USE_MULTICLUSTER_OIDC_ENV === "true";
    this.token = "";
  }

  isOidc = () => this.oidc;

  setToken(token) {
    let bearerMatch = token.match(/Bearer/g);
    if (bearerMatch && bearerMatch.length > 1) {
      token = token.split(",")[0];
    }
    this.token = token.trim().startsWith("Bearer") ? token.trim().substring(7) : token;
  }

  async doLogin(username, pwd, token) {
    if (this.oidc) {
      this.page.on("response", response => {
        // retrieves the token after the oidc flow, note this require "--set-authorization-header=true" flag to be enabled in oauth2proxy
        let oidcToken = response.headers()["authorization"];
        if (oidcToken) this.setToken(oidcToken);
      });
      await this.doOidcLogin(username, pwd);
    } else if (token) {
      this.setToken(token);
      await this.doTokenLogin(token);
    } else {
      console.log("ERROR: No valid login data provided.");
      return;
    }
    console.log("Logged into Kubeapps!");
  }

  async doLogout() {
    console.log("Logging out of Kubeapps");
    await this.page.click(".dropdown.kubeapps-menu .kubeapps-nav-link");
    await this.page.click('cds-button:has-text("Log out")');
    await this.page.waitForLoadState("networkidle");
    console.log("Logged out of Kubeapps");
  }

  async doOidcLogin(username, pwd) {
    console.log(`Logging in Kubeapps via OIDC in host: ${utils.getUrl("/")}`);

    // Go to Home page
    await this.page.goto(utils.getUrl("/"));
    await this.page.waitForLoadState("networkidle");

    // Click to Log in with OIDC provider
    await this.page.click("text=Login via OIDC Provider");
    await this.page.waitForLoadState("networkidle");

    // Click to Log in with Email
    await this.page.click("text=Log in with Email");
    await this.page.waitForLoadState("networkidle");

    // Type in credentials
    await this.page.fill('input[id="login"]', username);
    await this.page.fill('input[id="password"]', pwd);
    await this.page.click("#submit-login");
    await this.page.waitForLoadState("networkidle");
    await this.page.waitForLoadState("domcontentloaded");

    // Confirm Grant Access
    await this.page.locator('button.dex-btn:has-text("Grant Access")').click();
    await this.page.waitForLoadState("networkidle");
    await this.page.waitForLoadState("domcontentloaded");
  }

  async doTokenLogin(token) {
    console.log(`Logging in Kubeapps using token in host: ${utils.getUrl("/")}`);

    // Go to Home page
    await this.page.goto(utils.getUrl("/"));
    await this.page.waitForLoadState("networkidle");

    const inputLocator = this.page.locator("form input[name=token]");
    await inputLocator.fill(token);
    await this.page.click("#login-submit-button");

    await this.page.waitForLoadState("networkidle");
    await this.page.waitForLoadState("domcontentloaded");
  }
};

1const { chromium } = require('playwright-chromium');
2const { expect } = require('chai');
3let browser, page; // Declare reusable variables
4
5describe('E2E tests', function () {
6    this.timeout(60000)
7
8    before(async () => {
9        browser = await chromium.launch({ headless: false, slowMo: 1500 });
10        // browser = await chromium.launch();
11    });
12    after(async () => {
13        await browser.close();
14    });
15    beforeEach(async () => {
16        page = await browser.newPage();
17    });
18    afterEach(async () => {
19        await page.close();
20    });
21
22    it('Testing: load books', async () => {
23        await page.goto('http://localhost:3000/');
24        await page.click('id=loadBooks')
25        await page.waitForLoadState('domcontentloaded');
26
27        let table = await page.isVisible('tr');
28        expect(await table).to.be.true;
29    });
30
31    it('Testing: add book', async () => {
32        await page.goto('http://localhost:3000/');
33
34        await page.click('id=loadBooks');
35        await page.waitForLoadState('domcontentloaded');
36
37        await page.fill('[placeholder="Title..."]', 'New book');
38        await page.fill('[placeholder="Author..."]', 'New author');
39
40        let [request] = await Promise.all([
41            page.waitForRequest(request => request.url().includes('jsonstore/collections/books') && request.method() == 'POST'),
42            page.click('text=Submit')
43        ])
44
45        await page.click('id=loadBooks');
46        await page.waitForLoadState('domcontentloaded');
47
48        let postData = JSON.parse(request.postData());
49        expect(postData.author).to.equal('New author');
50        expect(postData.title).to.equal('New book');
51
52    });
53
54    it('Testing: edit book', async () => {
55        await page.goto('http://localhost:3000/');
56
57        await page.click('id=loadBooks')
58        await page.waitForLoadState('domcontentloaded');
59        await page.click('.editBtn')
60        await page.waitForSelector('#editForm');
61
62        await page.fill('#editForm input[name=title]', 'Edit title');
63        await page.fill('#editForm input[name=author]', 'Edit author');
64        await page.click('text=Save')
65
66        await page.click('id=loadBooks');
67
68        let content = await page.content();
69        expect(content).to.contains('Edit title');
70        expect(content).to.contains('Edit author');
71    });
72
73    it('Testing: delete book', async () => {
74        await page.goto('http://localhost:3000/');
75
76        await page.click('id=loadBooks')
77        await page.waitForLoadState('domcontentloaded');
78        
79        page.on('dialog', dialog => { dialog.accept() })
80        await page.click('text=Delete')
81
82        await page.click('id=loadBooks')
83        await page.waitForLoadState('domcontentloaded');
84
85        let content = await page.content();
86        expect(content).to.not.contain('Edit title');
87        expect(content).to.not.contain('Edit author');
88    });
89
90});
91

Source: tests.js

const { chromium } = require('playwright-chromium');
const { expect } = require('chai');
let browser, page; // Declare reusable variables

describe('E2E tests', function () {
    this.timeout(60000)

    before(async () => {
        browser = await chromium.launch({ headless: false, slowMo: 1500 });
        // browser = await chromium.launch();
    });
    after(async () => {
        await browser.close();
    });
    beforeEach(async () => {
        page = await browser.newPage();
    });
    afterEach(async () => {
        await page.close();
    });

    it('Testing: load books', async () => {
        await page.goto('http://localhost:3000/');
        await page.click('id=loadBooks')
        await page.waitForLoadState('domcontentloaded');

        let table = await page.isVisible('tr');
        expect(await table).to.be.true;
    });

    it('Testing: add book', async () => {
        await page.goto('http://localhost:3000/');

        await page.click('id=loadBooks');
        await page.waitForLoadState('domcontentloaded');

        await page.fill('[placeholder="Title..."]', 'New book');
        await page.fill('[placeholder="Author..."]', 'New author');

        let [request] = await Promise.all([
            page.waitForRequest(request => request.url().includes('jsonstore/collections/books') && request.method() == 'POST'),
            page.click('text=Submit')
        ])

        await page.click('id=loadBooks');
        await page.waitForLoadState('domcontentloaded');

        let postData = JSON.parse(request.postData());
        expect(postData.author).to.equal('New author');
        expect(postData.title).to.equal('New book');

    });

    it('Testing: edit book', async () => {
        await page.goto('http://localhost:3000/');

        await page.click('id=loadBooks')
        await page.waitForLoadState('domcontentloaded');
        await page.click('.editBtn')
        await page.waitForSelector('#editForm');

        await page.fill('#editForm input[name=title]', 'Edit title');
        await page.fill('#editForm input[name=author]', 'Edit author');
        await page.click('text=Save')

        await page.click('id=loadBooks');

        let content = await page.content();
        expect(content).to.contains('Edit title');
        expect(content).to.contains('Edit author');
    });

    it('Testing: delete book', async () => {
        await page.goto('http://localhost:3000/');

        await page.click('id=loadBooks')
        await page.waitForLoadState('domcontentloaded');
        
        page.on('dialog', dialog => { dialog.accept() })
        await page.click('text=Delete')

        await page.click('id=loadBooks')
        await page.waitForLoadState('domcontentloaded');

        let content = await page.content();
        expect(content).to.not.contain('Edit title');
        expect(content).to.not.contain('Edit author');
    });

});