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

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();

测试文件（位于项目中的./test/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

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

1. 页面对象不应该包含任何“检查”逻辑，这应该在测试中，因为，这就是测试的全部内容。因此，checkDeskTopMenuBartextLinks（）不应在标题中。（从技术上讲，这是可行的，但你很快就会迷失在这种结构中。）
2. wait t.expect（wait this.topMenuNavItem.withText（navText.exists）=

话虽如此，我简化了您尝试做的示例：

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重命名为其他名称。在我看来，它不是一个真正的配置文件，因为它包含用于检查的值。
• 我将遵循官方文档中提到的页面对象结构。
• 在.page（'s）中，我会使用一个变量而不是硬编码的URLhttps://wdwthemeparks.com/'); 。此URL可以进入真实的配置文件。
• 我会让测试尽可能简单和小。这意味着在一个测试中检查菜单项的名称，在另一个测试中检查href属性。在本例中，这可能不是什么大问题，但在更复杂的示例中，您会喜欢使用清晰的小测试来帮助您了解问题所在