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. Any help would be greatly appreciated. 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.
Any help is greatly appreciated! I'm still a bit new at this and learning, so please be patient and please be clear with any help/suggestions. Thanks in advance!
Aucun commentaire:
Enregistrer un commentaire