Cypress测试文件访问静态变量报undefined，如何正确访问？

你在页面文件中定义了DriveGridPage类的静态变量driveName：

class DriveGridPage { 
    static driveName = FileStoreCommonComponent.randomStringGenerator(5) 
} 
export default new DriveGridPage()

但在测试文件导入该类的实例后，访问driveName却得到undefined：

import DriveGridPage from "../../pom/app_modules/drive/drive_grid_page"

it("Create New Team Drive", () => {
const driveName = DriveGridPage.driveName
DriveGridPage.inputFileOrFolderName('Team Drive - ' + driveName)
})

原因分析 #

静态变量是属于类本身的属性，而非类实例的属性。你导出的是DriveGridPage的实例，直接通过实例访问类的静态成员自然会返回undefined。

解决方案 #

方案1：同时导出类和实例（推荐） #

修改页面文件，同时导出类本身和实例，这样既可以通过类访问静态变量，也能通过实例调用实例方法：

class DriveGridPage { 
    static driveName = FileStoreCommonComponent.randomStringGenerator(5) 
} 
const driveGridPageInstance = new DriveGridPage()
export { DriveGridPage, driveGridPageInstance }

测试文件中对应调整导入和使用方式：

import { DriveGridPage, driveGridPageInstance } from "../../pom/app_modules/drive/drive_grid_page"

it("Create New Team Drive", () => {
const driveName = DriveGridPage.driveName
driveGridPageInstance.inputFileOrFolderName('Team Drive - ' + driveName)
})

方案2：通过实例的constructor访问类 #

如果不想修改导出结构，可以通过实例的constructor属性获取类本身，进而访问静态变量：

import DriveGridPage from "../../pom/app_modules/drive/drive_grid_page"

it("Create New Team Drive", () => {
const driveName = DriveGridPage.constructor.driveName
DriveGridPage.inputFileOrFolderName('Team Drive - ' + driveName)
})

方案3：将静态变量改为实例属性（按需选择） #

如果该变量不需要共享给所有实例，只是当前实例的属性，可以去掉static关键字：

class DriveGridPage { 
    driveName = FileStoreCommonComponent.randomStringGenerator(5) 
} 
export default new DriveGridPage()

此时测试文件中原来的代码即可正常访问driveName。

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