PlaywrightJS Tutorial

PlaywrightJS Tutorial

  • Docs

›Using PlayWright on web pages

Setup

  • PlaywrightJS Installation
  • Install Mocha and Chai
  • Installation Test

First Steps

  • Create a PlaywrightJS Test
  • Using Mocha and Chai

The Playwright Library

  • The Browser Object
  • The Context Object
  • The Page Object
  • Selectors
  • Navigation
  • Interactions
  • Auditing

Using PlayWright on web pages

  • A real world case
  • An answer

Code Generation

  • Code Generation

An answer

One of the possible answers is

const pw = require('playwright')
const chai = require('chai')
const expect = chai.expect

let page, browser, context

describe('Selenium Playground Test', function() {
    this.timeout(30000);
    before(async function() {
        browser = await pw.chromium.launch({
          headless: false
        });
        context = await browser.newContext();
        page = await context.newPage('http://leafground.com/')
    })

    after(async function() {
      /*
        await page.close();
        await context.close();
        await browser.close();
       */
    })

    it('Checks the title of the page', async() => {
        await page.goto('http://leafground.com/');
        const title = await page.title();
        expect(title).to.equal('TestLeaf - Selenium Playground')
    })

    it('Navigate to Edit page', async() => {
        await page.click('text="Edit"');
        await page.waitForSelector('.wp-heading');
        //await page.waitForNavigation();
        let title = await page.$('.wp-heading')
        let text = await title.textContent();

        await page.fill('#email', 'mateo@mateo.com');
        let append = await page.$('input[value="Append "]');
        await append.press('End');
        await append.type('something here');
        await append.press('Tab');
        let username = await page.$('input[name="username"]');
        let username_text = await username.getAttribute('value')
        console.log('username: '+ username_text);
        username = await page.$$('input[name="username"]');
        await username[1].fill('');
        let last = await page.$('input:last-of-type');
        let last_disabled = await last.getProperty('disabled')
        console.log('last disabled: '+ last_disabled);


        expect(page.url()).to.equal('http://leafground.com/pages/Edit.html')
        expect(text).to.match(/Work with Edit Fields/)
    })
})

Please discuss...

← A real world caseCode Generation →