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

问题描述

我正在尝试使用testcafe / JavaScript创建测试，该测试会将网站的顶部菜单文本/链接与配置中存储的预期数据进行比较。我有一些testcafe的经验，但仍在学习。

设置并调用函数时，我输入的是函数，但没有输入其中的循环，如console.log所示，FOR循环内部的日志未打印到控制台。我已经调试了一段时间，无法解决。

配置文件（位于项目中的./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值。这些期望值存储在配置文件中。

解决方法

对于您为什么没有在控制台中使用“内部功能”，我没有明确的答案，因为在我方面稍作简化后，它确实起作用了。但是，我对如何使其更加清晰有一些建议，我将给您提供一个可行的示例。

页面对象不应包含应该在测试中的任何“检查”逻辑，因为好吧，这就是测试的全部内容。因此checkDesktopTopMenuBarTextLinks()不应属于Header类。（从技术上讲，它可以工作，但您迟早会陷入这种结构。）
await t.expect(await this.topMenuNavItem.withText(navText).exists) =>为什么第二次等待？
尝试尽可能简化选择器，例如topMenuNavItem可能只是Selector('.top-header-menu').find('a');
Json不能包含评论，而实际上这可能是您遇到问题的根源，但我不知道您是否只是在此处为问题添加了评论。但是config.json应该只是有效的json（您可以检查here）。您的示例不是有效的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/"
    }
}

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 Object结构。
我会在.page('https://wdwthemeparks.com/');中使用变量而不是硬编码的URL。该URL可以进入真实的配置文件。
我将使测试尽可能简单和小。这意味着在一项测试中检查菜单项的名称，并在另一项测试中检查href属性。在这个示例中，也许这没什么大不了的，但是在更复杂的示例中，您将不胜感激，有清晰而小型的测试可以帮助您了解问题出在哪里。

automated-tests e2e-testing javascript testcafe