如何解决如何确定如何将网站导航文本/链接与配置进行比较
我正在尝试使用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
属性。在这个示例中,也许这没什么大不了的,但是在更复杂的示例中,您将不胜感激,有清晰而小型的测试可以帮助您了解问题出在哪里。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。