如何确定如何将网站导航文本/链接与配置进行比较

Question

我正在尝试使用 TestCafe/JavaScript 创建一个测试，它将网站的顶级菜单文本/链接与存储在配置中的预期数据进行比较。我有一些使用 TestCafe 的经验，但仍在学习中。当我设置函数并调用它时，我进入函数而不是其中的循环，正如 FOR 循环内的 console.log 未打印到控制台所证明的那样。我已经调试了一段时间，无法弄清楚。网址：https ://wdwthemeparks.com配置文件（位于项目中的./config/default.json5）    // Expected Desktop top menu links    "top_menu_nav": {        "All": "/all/",        "News": "/news/",        "Press Releases": "/press/",        "Rumors": "/rumors/",        "About": "/about/",        "Contact": "/contact/",        "Refurbishments": "/refurbishments/",    },}选择器和相关函数（位于项目中的 ./page-objects/header.js）const config = require('../config/config.js');import { Selector, t } from 'testcafe';class Header {    // Top Menu Selectors    topMenu = Selector('.td-header-top-menu');    topMenuPageLinksSection = Selector('.td-header-sp-top-menu');    topMenuSocialIconsSection = Selector('.td-header-sp-top-widget');    topMenuNavItem = Selector('.top-header-menu').child().find('a').withAttribute('href');    // Logo    headerLogo = Selector('.td-header-sp-logo');    // Nav Menu    mainNavMenu = Selector('#td-header-menu');    /////////////////////////    /////// Functions ///////    /////////////////////////    async checkDesktopTopMenuBarTextLinks() {        console.log('Inside function');        for (let navText in config.top_menu_nav ) {            console.log('inside for loop');            await t.expect(await this.topMenuNavItem.withText(navText).exists).ok(`"${navText}" top navigation menu do not exists.`);            await t.expect(await this.topMenuNavItem.withText(navText).getAttribute('href')).contains(config.top_menu_nav[navText]);            }        }}export let header = new Header();因此，我再次想做的是测试前端是否显示文本并为顶部菜单中的每个项目提供正确的 href 值。这些预期值存储在配置文件中。

Answer 1

对于为什么您没有将“内部功能”输入控制台，我没有明确的答案，因为在我这边稍微简化后它确实起作用了。但我有一些关于如何让它更清楚的建议 + 我会给你一个工作示例。

1. 页面对象不应该包含任何应该在测试中的“检查”逻辑，因为这就是测试的全部内容。所以checkDesktopTopMenuBarTextLinks()不应该Header上课。（它在技术上会起作用，但你迟早会迷失在这个结构中。）

2. await t.expect(await this.topMenuNavItem.withText(navText).exists)=> 为什么第二个等待？

3. 尝试尽可能地简化您的选择器，例如topMenuNavItem可能只是Selector('.top-header-menu').find('a');

4. Json 不能包含评论，这实际上可能是您问题的根源，但我不知道您是否只是在此处为您的问题添加了评论。但config.json应该只是一个有效的 json（你可以在这里查看）。您的示例不是有效的 json。如果我将你的 config.json 与评论一起使用，我会得到这个错误Unexpected token / in JSON at position 3。

话虽如此，我简化了您要执行的操作的示例：

资源/config.json

{

    "top_menu_nav": {

        "All": "/all/",

        "News": "/news/",

        "Press Releases": "/press/",

        "Rumors": "/rumors/",

        "About": "/about/",

        "Contact": "/contact/",

        "Refurbishments": "/refurbishments/"

    }

}

对象/header.js

import { Selector, t } from 'testcafe';

class Header {

    constructor() {

        this.topMenuNavItem = Selector('.top-header-menu').find('a');

    }

}

export default new Header();

测试/menu.js

import { Selector } from 'testcafe';

import config from '../config';

import Header from '../Objects/header';

const testData = require('../Resources/config.json');

fixture `Check Menu`    

    .page('https://wdwthemeparks.com/');    

test      

    ('Check Menu Items', async t => {       

        for (let navText in testData.top_menu_nav) {

            await t.expect(Header.topMenuNavItem.withText(navText).exists).ok();          

        }        

});

当我执行它时，测试成功运行：

可能的进一步改进：

• 命名约定：我可能会重命名config.json为其他名称。在我看来，它不是真正的配置文件，因为它包含您用于检查的值。

• 我将遵循此处官方文档中提到的页面对象结构。

• 我会在.page('https://wdwthemeparks.com/');. 这个 URL 可以进入一个真实的配置文件。

• 我会让测试尽可能简单和小。这意味着在一个测试中检查菜单项的名称并href在另一个测试中检查属性。也许在这个例子中这不是什么大问题，但在更复杂的例子中，你会喜欢有清晰的小测试来帮助你找出问题所在。