Javascript 如何确定如何将网站导航文本/链接与配置进行比较

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

当我设置函数并调用它时，我输入了函数，但没有输入其中的循环，正如FOR循环内部的console.log没有打印到控制台所证明的那样。我调试这个已经有一段时间了，但无法理解

网址：

配置文件（位于项目中的./Config/default.json5）

选择器和相关函数（位于项目中的./page objects/header.js）

测试文件（位于项目中的./tests/header.js；文件中的其他行注释掉，只是因为想要测试函数）

---

因此，我想再次测试前端是否显示文本，以及顶部菜单中每个项目的href值是否正确。这些期望值存储在配置文件中。

我不清楚为什么不将“内部函数”放入控制台，因为在我方面稍微简化后，它确实起作用了。但是我有一些关于如何让它更清晰的建议，我将给你一个工作示例

页面对象不应该包含任何“检查”逻辑，这应该在测试中，因为，这就是测试的全部内容。因此，

checkDeskTopMenuBartextLinks（）

不应在

标题中。（这在技术上是可行的，但你很快就会迷失在这个结构中，或者更晚。）

wait t.expect（wait this.topmenunnaItem.withText（navText）.exists）

=>第二个等待的原因是什么

尽量简化选择器，例如，

topMenuNavItem

可能只是

选择器（'.top header menu'）。查找（'a'）

Json不能包含注释，这实际上可能是您的问题的根源，但我不知道您是否只是在这里为您的问题添加了注释。但是

config.json

应该只是一个有效的json（您可以检查它）。您的示例不是有效的json。如果我将config.json与注释一起使用，我将在json的位置3处获得此错误

意外标记/

话虽如此，我简化了您尝试做的示例：

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

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

测试/menu.js

import { Selector, t } from 'testcafe';

class Header {

    constructor() {
        this.topMenuNavItem = Selector('.top-header-menu').find('a');
    }
}

export default new Header();

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

  重命名为其他名称。在我看来，它不是一个真正的配置文件，因为它包含用于检查的值
• 我将遵循官方文件中提到的页面对象结构
• 在

  .page（'s）中，我会使用一个变量而不是硬编码的URLhttps://wdwthemeparks.com/');。此URL可以进入真实的配置文件

• 我会让测试尽可能简单和小。这意味着在一个测试中检查菜单项的名称，在另一个测试中检查

  href

  属性。在本例中，这可能不是什么大问题，但在更复杂的示例中，您会喜欢使用清晰的小测试来帮助您了解问题所在

---

我没有一个明确的答案来解释为什么您没有将“内部功能”引入控制台，因为在我这边稍微简化一下之后，它确实起了作用。但是我有一些关于如何让它更清晰的建议，我将给你一个工作示例

页面对象不应该包含任何“检查”逻辑，这应该在测试中，因为，这就是测试的全部内容。因此，

checkDeskTopMenuBartextLinks（）

不应在

标题中。（这在技术上是可行的，但你很快就会迷失在这个结构中，或者更晚。）

wait t.expect（wait this.topmenunnaItem.withText（navText）.exists）

=>第二个等待的原因是什么

尽量简化选择器，例如，

topMenuNavItem

可能只是

选择器（'.top header menu'）。查找（'a'）

Json不能包含注释，这实际上可能是您的问题的根源，但我不知道您是否只是在这里为您的问题添加了注释。但是

config.json

应该只是一个有效的json（您可以检查它）。您的示例不是有效的json。如果我将config.json与注释一起使用，我将在json的位置3处获得此错误

意外标记/

话虽如此，我简化了您尝试做的示例：

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

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

测试/menu.js

import { Selector, t } from 'testcafe';

class Header {

    constructor() {
        this.topMenuNavItem = Selector('.top-header-menu').find('a');
    }
}

export default new Header();

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

  重命名为其他名称。在我看来，它不是一个真正的配置文件，因为它包含用于检查的值
• 我将遵循官方文件中提到的页面对象结构
• 在

  .page（'s）中，我会使用一个变量而不是硬编码的URLhttps://wdwthemeparks.com/');。此URL可以进入真实的配置文件

• 我会让测试尽可能简单和小。这意味着在一个测试中检查菜单项的名称，在另一个测试中检查

  href

  属性。在本例中，这可能不是什么大问题，但在更复杂的示例中，您会喜欢使用清晰的小测试来帮助您了解问题所在

---

这对我不起作用。当我像您一样设置所有内容时，我得到了一个错误：1）断言错误：expected false to be truthy+expected-actual-false+undefined>13 | wait t t.expect（Header.topmenunanuitem.withText（navText）.exists）。ok（）；（由于注释字符数限制而缩短）。