如何确定如何将网站导航text/links 与配置进行比较

Question

我正在尝试使用 TestCafe/JavaScript 创建一个测试，它将网站的顶级菜单 text/links 与存储在配置中的预期数据进行比较。我对 TestCafe 有一些经验，但仍在学习中。

当我设置函数并调用它时，我进入了函数而不是其中的循环，正如 FOR 循环内部的 console.log 未打印到控制台所证明的那样。我已经调试了一段时间，无法弄清楚。

配置文件（位于项目中./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();

测试文件（位于项目中./tests/header.js，文件中其他行因为要测试功能而被注释掉）

const config = require('../config/config.js');
import { Selector, t, ClientFunction } from 'testcafe';
import { header } from '../page-objects/header';

/* TO DO
    1. Check Top Menu item names/links are valid
    2. Check Main Nav item names/links are valid
*/

const siteURL = 'https://wdwthemeparks.com/';  // Set the siteURL into a constant

fixture(`Desktop Header`)
    .page(`${siteURL}`)

test.meta({ desktop: 'true' })('Verify presence and functionaltiy of Header', async t => {

    await header.checkDesktopTopMenuBarTextLinks();

    // // Test the Top Menu area
    // await t
    //  .expect(header.topMenu.visible).ok('Top Menu is NOT visible')
    //  .expect(header.topMenuPageLinksSection.visible).ok('Top Menu Page Links are NOT visible')
    //  .expect(header.topMenuSocialIconsSection.visible).ok('Top Menu Social Icons are NOT visible');

    // // Verify Logo is visible and clicking goes to siteURL
    // await t.expect(header.headerLogo.visible).ok('Logo is NOT visible');
    // await t.click(header.headerLogo)
    // const getLocation = ClientFunction(() => document.location.href);  // Get the URL of the page and set to constant
    // await t.expect(getLocation()).contains(`${siteURL}`);

    // // Verify Main Menu
    // await t.expect(header.mainNavMenu.visible).ok('Main Nav menu is NOT visible');
});

因此，我再次想做的是测试前端是否显示文本并为顶部菜单中的每个项目提供正确的 href 值。这些预期值存储在配置文件中。

Answer 1

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

页面对象不应包含任何“检查”逻辑，这应该在测试中，因为这就是测试的全部内容。所以 checkDesktopTopMenuBarTextLinks() 不应该在 Header class 中。（它在技术上是可行的，但你迟早会迷失在这个结构中。）
await t.expect(await this.topMenuNavItem.withText(navText).exists) => 为什么第二个等待？
尽量简化您的选择器，例如topMenuNavItem 可能只是 Selector('.top-header-menu').find('a');
Json 不能包含评论，这实际上可能是您问题的根源，但我不知道您是否只是在此处为您的问题添加了评论。但是 config.json 应该只是一个有效的 json （你可以检查它 here）。您的示例无效 [=75=]。如果我在评论中使用你的config.json，我会得到这个错误Unexpected token / in JSON at position 3。

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

Resources/config.json

{
    "top_menu_nav": {
        "All": "/all/",
        "News": "/news/",
        "Press Releases": "/press/",
        "Rumors": "/rumors/",
        "About": "/about/",
        "Contact": "/contact/",
        "Refurbishments": "/refurbishments/"
    }
}

Objects/header.js

import { Selector, t } from 'testcafe';

class Header {

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

export default new Header();

Tests/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 重命名为其他名称。在我看来，它不是真正的配置文件，因为它包含您用于检查的值。
我会按照官方提到的页面对象结构documentation here。
我会在 .page('https://wdwthemeparks.com/'); 中使用变量而不是 hard-coded URL。这个 URL 可以进入一个真正的配置文件。
我会保持测试尽可能简单和小。这意味着在一个测试中检查菜单项的名称并在另一个测试中检查 href 属性。也许在这个例子中这没什么大不了的，但在更复杂的例子中，你会喜欢有清晰而小的测试来帮助你找出问题所在。

如何确定如何将网站导航text/links 与配置进行比较

How to determine how to compare website navigation text/links to config

javascript

testing

automated-tests

e2e-testing

testcafe