页面对象不返回 Playwright 中的选择器

Question

使用微软的剧作家，我有这个测试代码可以工作：

  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 模块

Answer 1

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

如果你想要这个号码，你必须等待它：

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

另一个问题似乎是您没有（至少在您的问题中没有）任何 UserFormsPage 对象的创建。构造函数需要page，但您似乎没有提供它。