首页 > 解决方案 > 页面对象不返回 Playwright 中的选择器

问题描述

使用微软的剧作家,我有这个有效的测试代码:

  describe('When a user views a list of forms', () => {
    let rows;

    before(async() => {
      await page.waitForSelector('tbody');
      rows = await page.$$('tr');
    });

    it('should show a table of forms', async() => {
      rows.length.should.equal(11);
    });

我想把它分解成一个页面对象。我有这个作为我的页面对象

class UserFormsPage {
  constructor(page) {
    this.page = page;
  }

  async rows() {
    await this.page.waitForSelector('tbody');
    return await this.page.$$('tr');
  }       
}         

这是我的测试:


describe.only('List Forms Widget', function() {                                                                 
  let page;
  ...

  before(async function() {                                                      
    const context = await this.browser.newContext();                             
    page = await context.newPage();                                              
    const userFormsPage = new UserFormsPage(page);
  ...

  describe('When a user views a list of forms', () => {
    let rows;
     ...

    before(async() => {
      rows = await userFormsPage.rows();
    });                   
            
    it('should show a table of forms', async() => {
      rows.length.should.equal(11);
    });

但我明白了

  1) List Forms Widget
       When a user views a list of forms
         "before all" hook for "should show a table of forms":
     TypeError: Cannot read property 'rows' of undefined

为什么是这样?

注意:如果重要,请在 Node 16 中使用本机 es 模块

标签: mocha.jse2e-testingplaywright

解决方案


你的rows()方法是异步的。每个异步方法都返回一个承诺,所以在你的钩子中,rows = userFormsPage.rows();只会产生Promise { <pending> }.

如果你想要这个号码,你必须等待它:

before(async () => {
  rows = await userFormsPage.rows();
}); 

另一个问题似乎是您没有(至少在您的问题中没有)任何UserFormsPage对象的创建。构造函数期望page,但您似乎没有提供它。


推荐阅读