Puppeteer - 测试不执行任何操作

Question

so, I'm using Puppeteer with Jest. After adding

    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();

My tests does not perform any actions. It doesn't matter if I'm using headless mode or let's call it "normal" mode. Anybody can help me?

homepage.test.js

const puppeteer = require('puppeteer');
const HomePage = require('./page_objects/HomePage');

const homePage = new HomePage();
describe('Homepage', () => {
  beforeAll(async () => {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();
    await page.goto(homePage.path);
    await page.waitForSelector(homePage.loginPanel);
  });
  it('Log into your account', async () => {
    await homePage.fillLoginForm();
    await expect(page).toMatchElement(homePage.productList);
    await page.screenshot({ path: 'example.png' });
  });

HomePage.js

module.exports = class HomePage {
  constructor() {
    this.path = 'https://www.saucedemo.com/index.html';
    this.loginPanel = '#login_button_container';
    this.productList = 'div[class="inventory_container"]';
    this.loginForm = {
      fields: {
        usernameInput: 'input[id="user-name"]',
        passwordInput: 'input[id="password"]',
        logInButton: 'input[class="btn_action"]',
      },
    };
  }

  async fillLoginForm() {
    await page.type(this.loginForm.fields.usernameInput, 'standard_user');
    await page.type(this.loginForm.fields.passwordInput, 'secret_sauce');
    await page.click(this.loginForm.fields.logInButton);
  }
};

Answer 1

The answer has two parts, one with normal jest and another with jest-puppeteer . You can skip to the jest-puppeteer if you want.

Problem (with jest ):

The browser and page inside beforeAll block has no relation to the it blocks. It also does not have any relation with the page inside HomePage class as well.

You did not mention if you were using jest-puppeteer or not.

Solution:

Create block scoped variables for the describe block, and pass the page object to the modules.

Refining the HomePage class

Consider the following HomePage class.

// HomePage.js
class HomePage {
  constructor(page) {
    this.page = page;
  }

  async getScreenshot() {
    await this.page.screenshot({ path: "example.png" });
  }

  async getTitle(page) {
    return page.title();
  }
}

As you can see, there are two ways to access to the page inside the class. Either pass inside the constructor, or use with the method directly.

The method getScreenshot has a this.page , while getTitle has access to a page .

Refining the test

You cannot use this inside the jest tests due to this issue , but you can declare a variable on top of a block, then access it later.

describe("Example", () => {
  // define them up here inside the parent block
  let browser;
  let page;
  let homepage;

  beforeAll(async () => {
    // it has access to the browser, page and homepage
    browser = await puppeteer.launch({ headless: true });
    page = await browser.newPage();
    homepage = new HomePage(page); // <-- pass the page to HomePage here

    await page.goto("http://example.com");
    await page.waitForSelector("h1");
    return true;
  });
});

Now all other blocks can access to the page. According to our previous example HomePage class, we can do either of following depending on how we defined the methods.

it("Gets the screenshot", async () => {
    await homepage.getScreenshot(); // <-- will use this.page
  });
it("Gets the title", async () => {
    await homepage.getTitle(page); // <-- will use the page we are passing on
});

Finally we cleanup the tests,

afterAll(async () => {
    await page.close();
    await browser.close();
    return true;
});

We probably need to run the jest tests with detectOpenHandles for headfull mode.

jest . --detectOpenHandles

Result:

Problem (with jest-puppeteer ):

jest-puppeteer already gives you a global browser and page object. You do not need define anything.

However if you want to use jest-puppeteer and expect-puppeteer , you have to use a custom config file.

Solution:

Create a jest-config.json file and put the contents,

{
  "preset": "jest-puppeteer",
  "setupFilesAfterEnv": ["expect-puppeteer"]
}

Now, get rid of browser and page creation code, as well as any afterAll hooks for page.close as well.

Here is a working test file,

class HomePage {
  async getTitle() {
    return page.$("h1");
  }
}

describe("Example", () => {
  const homepage = new HomePage();
  beforeAll(async () => {
    // it has access to a global browser, page and scoped homepage

    await page.goto("http://example.com");
    await page.waitForSelector("h1");
  });
  it("Gets the screenshot", async () => {
    const element = await homepage.getTitle();
    await expect(element).toMatch("Example");
  });
});

And let's run this,

jest . --detectOpenHandles --config jest-config.json

Result: