如何确定如何将网站导航文本/链接与配置进行比较 [英] How to determine how to compare website navigation text/links to config

问题描述

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

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

URL:

可能的进一步改进:

• 命名约定:我可能会将 config.json 重命名为其他名称.在我看来，它并不是真正的配置文件，因为它包含您要检查的值.
• 我将遵循官方中提到的Page Object结构.文档.
• 我会在 .page('https://wdwthemeparks.com/'); 中使用变量而不是硬编码URL.该URL可以进入真实的配置文件.
• 我会保持测试尽可能简单和小巧.这意味着在一项测试中检查菜单项的名称，并在另一项测试中检查 href 属性.在这个示例中，也许这没什么大不了的，但是在更复杂的示例中，您将很高兴进行清晰而小型的测试来帮助您了解问题所在.

I'm trying to create a test using TestCafe/JavaScript that will compare a website's top menu text/links to the expected data stored in a config. I have some experience with TestCafe, but am still learning.

When I set up the function and call it, I enter the function but not the loop within it, as evidenced by the console.log inside of the FOR loop not being printed to the console. I've been debugging this for a while and cannot figure it out.

URL: https://wdwthemeparks.com

Config file (located at ./config/default.json5 in the project)

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

Selectors and the function in question (located at ./page-objects/header.js in the project)

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 file (located at ./tests/header.js in the project; other lines in the file commented out just due to wanting to test the function)

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');
});

So, again, what I want to do is test that the front end shows the text and has the proper href values for each item in the top menu. Those expected values are stored in the config file.

解决方案

I don't have a clear answer to why you are not getting "Inside function" into the console because after a slight simplification on my side it did work. But I have a few recommendations about how to make it a bit more clear + I'll give you a working example.

1. Page Objects should not contain any "checking" logic, that is supposed to be in tests because, well, that's what tests are all about. So checkDesktopTopMenuBarTextLinks() should not be in Header class. (it will work technically but you'll lose yourself in this structure sooned or later.)
2. await t.expect(await this.topMenuNavItem.withText(navText).exists) => why that second await?
3. Try to simplify your selectors as much as possible, e.g. topMenuNavItem could be just Selector('.top-header-menu').find('a');
4. Json can't contain comments, which actually could be a source of your problems, but I don't know if you just added the comment for your question here. But config.json should be just a valid json (you can check it here). Your example is not a valid json. If I use your config.json with comments, I'll get this error Unexpected token / in JSON at position 3.

Having said that, I simplified the example of what you're trying to do:

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

When I execute this, the test is run successfully:

Possible further improvements:

• naming conventions: I'd perhaps rename config.json to something else. It doesn't seem to me as a real config file since it contains values you're using for checking.
• I'd follow Page Object structure mentioned in the official documentation here.
• I'd use a variable instead of a hard-coded URL in .page('https://wdwthemeparks.com/');. This URL can go into a real config file.
• I'd keep tests as simple and small as possible. That means checking names of the menu items in one test and checking href attributes in another. Perhaps it's not a big deal in this example, but in more complex examples, you'll appreciate having clear and small tests that help you see where the problem is.

这篇关于如何确定如何将网站导航文本/链接与配置进行比较的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！