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

问题

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.

回答1:

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.

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.)
await t.expect(await this.topMenuNavItem.withText(navText).exists) => why that second await?
Try to simplify your selectors as much as possible, e.g. topMenuNavItem could be just Selector('.top-header-menu').find('a');
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.

来源：https://stackoverflow.com/questions/63400883/how-to-determine-how-to-compare-website-navigation-text-links-to-config

标签

javascript

testing

automated-tests

e2e-testing

testcafe