亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何確定如何將網站導航文本/鏈接與配置進行比較

如何確定如何將網站導航文本/鏈接與配置進行比較

慕森卡 2023-01-06 11:20:45
我正在嘗試使用 TestCafe/JavaScript 創建一個測試,它將網站的頂級菜單文本/鏈接與存儲在配置中的預期數據進行比較。我有一些使用 TestCafe 的經驗,但仍在學習中。當我設置函數并調用它時,我進入函數而不是其中的循環,正如 FOR 循環內的 console.log 未打印到控制臺所證明的那樣。我已經調試了一段時間,無法弄清楚。網址:https ://wdwthemeparks.com配置文件(位于項目中的./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();因此,我再次想做的是測試前端是否顯示文本并為頂部菜單中的每個項目提供正確的 href 值。這些預期值存儲在配置文件中。
查看完整描述

1 回答

?
泛舟湖上清波郎朗

TA貢獻1818條經驗 獲得超3個贊

對于為什么您沒有將“內部功能”輸入控制臺,我沒有明確的答案,因為在我這邊稍微簡化后它確實起作用了。但我有一些關于如何讓它更清楚的建議 + 我會給你一個工作示例。

  1. 頁面對象不應該包含任何應該在測試中的“檢查”邏輯,因為這就是測試的全部內容。所以checkDesktopTopMenuBarTextLinks()不應該Header上課。(它在技術上會起作用,但你遲早會迷失在這個結構中。)

  2. await t.expect(await this.topMenuNavItem.withText(navText).exists)=> 為什么第二個等待?

  3. 嘗試盡可能地簡化您的選擇器,例如topMenuNavItem可能只是Selector('.top-header-menu').find('a');

  4. Json 不能包含評論,這實際上可能是您問題的根源,但我不知道您是否只是在此處為您的問題添加了評論。但config.json應該只是一個有效的 json(你可以在這里查看)。您的示例不是有效的 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/"

    }

}

對象/header.js


import { Selector, t } from 'testcafe';


class Header {


    constructor() {

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

    }

}


export default new Header();

測試/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();          

        }        

});

當我執行它時,測試成功運行:

http://img1.sycdn.imooc.com//63b793bb0001f99502300089.jpg

可能的進一步改進:

  • 命名約定:我可能會重命名config.json為其他名稱。在我看來,它不是真正的配置文件,因為它包含您用于檢查的值。

  • 我將遵循此處官方文檔中提到的頁面對象結構。

  • 我會在.page('https://wdwthemeparks.com/');. 這個 URL 可以進入一個真實的配置文件。

  • 我會讓測試盡可能簡單和小。這意味著在一個測試中檢查菜單項的名稱并href在另一個測試中檢查屬性。也許在這個例子中這不是什么大問題,但在更復雜的例子中,你會喜歡有清晰的小測試來幫助你找出問題所在。


查看完整回答
反對 回復 2023-01-06
  • 1 回答
  • 0 關注
  • 155 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號