我们正在从 GEB/Spock 迁移到 Cypress 以实现前端自动化。对于 GEB/Spock，页面对象具有静态内容。这用于创建页面对象的选择器。
class LoginPage extends Page {
//private static Logger log = LoggerFactory.getLogger(LoginPage.class);
static url = 'login/'
static at = { title == "Login to TalentBank"}
static content = {
backgroundImage { $("div [style*=\"background-image\"]") }
logo { $(".center-img img") }
emailHeader { $("#emailGroup:not([style*=\"none\"]) label") }
emailTextBox { $('#emailGroup:not([style*="none"]) #email') }
nextButton { $('#loginWithEmail') }
pwdHeader { $("#passwordGroup:not([style*=\"none\"]) label") }
pwdTextBox { $("#passwordGroup:not([style*=\"none\"]) #password") }
loginButton { $("#loginWithPassword") }
loginError(wait: true) { $("#loginError") }
在 cypress 中，我不确定在哪里创建和调用这些对象。选择器应该创建为固定装置还是支持文件？我已阅读 cypress 文档，但找不到我要找的内容。
编辑:2/4
在支持下，我尝试创建一个 LoginPage.js 文件来包含对象
// Login Page Objects
const emailTextBox = $('#emailGroup:not([style*="none"]) #email');
我的测试位于集成目录下。我在测试中使用新常量。我的 IDE 中没有错误，因为测试似乎找到了 Ctrl+Space 代码补全中显示的常量。
describe('Successfull log in to the System', function() {
it('Standard User - Successful log in ', function() {
cy.get(emailTextBox).type('<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2a78454e444f53785f5243446a474b434643444b5e455804494547" rel="noreferrer noopener nofollow">[email protected]</a>')
但是，当我运行测试时，我收到一条错误消息
ReferenceError: emailTextBox is not defined
。
最佳答案
好的，这些是可以交互的不同选择器:
我会推荐一个完全不同的类，然后导入它们？ 例如，一个名为 locators.js 的文件
其中包含:
export const backgroundImage = () => cy.get("div [style*=\"background-image\"]");
然后在您的其他文件中，您可以像这样导入它:
import * as locators from "../locators/locators.js";
并这样调用它(示例):
locators.backgroundImage()
.should('be.visible')
.click();
希望这有帮助!
关于javascript - 为 Cypress 创建静态内容选择器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54450438/