如何解决Playwright测试中「Cannot read properties of undefined (reading 'getInput')」错误？

问题原因 #

你遇到的错误核心是**videoPage实例未被正确初始化**就传递给了VideoPageSteps类：

• 在beforeAll钩子中，仅声明了videoPage变量，但未调用new VideoPage(page)创建实例，直接把值为undefined的videoPage传给了VideoPageSteps的构造函数。
• 当VideoPageSteps的insertQueryText方法调用this.videoPage.getInput()时，this.videoPage是undefined，因此抛出「无法读取undefined的getInput属性」的错误。

另外你提供的videoPage和videoPage.spec.ts代码完全重复，推测是粘贴失误，以下以videoPage.spec.ts为例修正。

解决步骤 #

1. 在beforeAll中先实例化VideoPage #

修改测试文件的beforeAll逻辑，先创建VideoPage实例，再初始化VideoPageSteps：

import { chromium, test} from '@playwright/test'
import * as videoPageData from '../services/data/videoPage.data.json'
import VideoPageSteps from '../services/steps/videoPage.steps'
import VideoPage from '../services/pages/videoPage'

test.describe('Test suite', () => {
    
    let videoPage: VideoPage
    let videoPageSteps: VideoPageSteps

    test.beforeAll(async () => {
        const browser = await chromium.launch()
        const page = await browser.newPage()
        // 先实例化VideoPage
        videoPage = new VideoPage(page)
        // 传入实例化后的videoPage创建VideoPageSteps
        videoPageSteps = new VideoPageSteps(page, videoPage)

        await page.goto(videoPageData.data.baseURL, {waitUntil: 'load'})
    })

    test('Entering a search query', async () => {
        await videoPageSteps.insertQueryText(videoPageData.data.queryText)
    })
})

2. 确认VideoPage类的getInput方法存在 #

确保../services/pages/videoPage路径下的VideoPage类正确定义了getInput方法，示例如下：

import { Page, Locator } from '@playwright/test';

export default class VideoPage {
  private page: Page;
  private inputLocator: Locator;

  constructor(page: Page) {
    this.page = page;
    // 替换成你页面中实际的输入框选择器
    this.inputLocator = page.locator('input[name="search"]');
  }

  getInput(): Locator {
    return this.inputLocator;
  }
}

额外建议 #

• 删除重复的测试代码，videoPage和videoPage.spec.ts内容一致，保留一份即可。
• 若项目架构允许，可在VideoPageSteps的构造函数内直接实例化VideoPage，减少外部依赖传递。

内容的提问来源于stack exchange，提问作者lemabatje