How to use waitForLoadState method in Playwright Internal

Best JavaScript code snippet using playwright-internal

Run Playwright Internal automation tests on LambdaTest cloud grid

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

kubeapps-login.js

Source: kubeapps-login.js Github

copy
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
Full Screen

tests.js

Source: tests.js Github

copy
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
Full Screen

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.

Try LambdaTest

Run JavaScript Tests on LambdaTest Cloud Grid

Execute automation tests with Playwright Internal 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)