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 TestCa

Solution 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.

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.