賽普拉斯：每個循環的 request() 問題

Question

我正在使用 Cypress 開發一個測試框架，並面臨一個問題，即我嘗試執行each循環並且每次迭代在<a> tag上執行request函數，然后執行斷言，該響應包含來自 a 的特定值regex表達式。 我可以看到它開始執行請求鏈接，但顯然響應的主體太大了，瀏覽器停止運行，視覺上顯示 Cypress UI 凍結或似乎沒有響應。 （測試可能仍在運行，但 Cypress UI 似乎被凍結或非常笨拙。）

我曾嘗試尋找有關此問題的解決方案，但沒有任何解決方案或替代方案可以解決我的困境。 我曾想過使用 for each 循環來遍歷標簽，但我認為比我現在擁有的會更慢和更糟。 有沒有人在與 Cypress 合作時遇到過這個問題？

代碼：用於查看和驗證列表內容鏈接的功能測試

const steamHeader = new SteamGlobalHeader(cy);

steamHeader.getActionSection().get('#language_dropdown')
            .within(() => {
                const langList = '/^schinese|tchinese|japanese|koreana'+
                '|thai|bulgarian|czech|danish|german|spanish|latam|greek'+
                '|french|italian|hungarian|dutch|norwegian|polish|portuguese'+
                '|brazilian|romanian|russian|finnish|swedish|turkish'+
                '|vietnamese|http://translation.steampowered.com$/';
                steamHeader.get('a[class="popup_menu_item tight"]').should('have.length', 28)
                .each(($a) => {
                    steamHeader.inspectRequestURL(steamHeader.get($a), 'href', 'body', langList);
                });

            });

inspectRequestURL() 的函數（使用 Cypress 的 POM 基頁的一部分）

inspectRequestURL(givenValue, propValue, requestSection, requestTarget){
        givenValue.then(($a) => {
            const prop = $a.prop(propValue);

            this.cy.request(prop).its(requestSection).should('include', requestTarget);
        })
    }

Answer 1

雖然這可能不是每個人的解決方案。 有人建議我創建一個任務（ cy.task() ）並使用 Node js 中的代碼來處理請求。 對於我的請求，我使用 axios 包來處理 get 請求並在內容匹配值以及狀態代碼時返回一個布爾值。

編輯：但是，由於在我的列表中途或接近尾聲時超時，我仍然看到斷言失敗。 幾天后我在 Steam 網站上再次對此進行了重新測試，現在我的測試運行可以在 1.5 分鍾內順利完成。 我確實創建了一種替代方法來一次對所有鏈接執行請求，而不是通過迭代。 （完成時間至少快了 10 秒。）

編輯：（舊方法）：在 cypress/plugins/index.js 中找到的任務：

const axios = require('axios').default;
 // use axios
module.exports = (on, config) => {
  // `on` is used to hook into various events Cypress emits
  // `config` is the resolved Cypress config
  on('task', {
    //Work on request and return, learn what gets returned
    getURLBodyResponseContains: ({href, target}) => {
        return axios.get(href)
          .then( (response) => {
            //console.log('target: '+ target);
            if (response.data.match(target)) {
              return { answer: true, status: response.status };
            } else {
              return { answer: false, status: response.status };
            }
          })
          .catch((error) => console.log(error));
          
          
    }
})

測試代碼：

it.only('Test Lanuage list', () => {
        const steamHeader = new SteamGlobalHeader(cy);

        steamHeader.getActionItem('span', 'language').click();

        steamHeader.getActionSection().get('#language_dropdown')
            .within(() => {
                const langList = /^schinese|tchinese|japanese|koreana|thai|bulgarian|czech|danish|german|spanish|latam|greek|french|italian|hungarian|dutch|norwegian|polish|portuguese|brazilian|romanian|russian|finnish|swedish|turkish|vietnamese|Steam Translation Server/;
                steamHeader.get('a[class="popup_menu_item tight"]').as('languageLinks');
                steamHeader.get('@languageLinks').should('have.length', 28);
                
                steamHeader.get('@languageLinks').each(($a) => {
                    steamHeader.getCy().task('getURLBodyResponseContains', {href: $a.prop('href'), target: langList}, {timeout: 100000}).as('returnValue');
                    steamHeader.get('@returnValue').its('status').should('equal', 200);
                    steamHeader.get('@returnValue').its('answer').should('be.true');
                    
                });
            });

    });

新方法：幾天后我重新測試了我的測試代碼，現在我沒有遇到高頻率的超時問題。 在試圖找出替代方案的同時，我想出了一種同時執行所有請求的方法，而不是一個一個。 請求全部完成后，將結果作為一個數組返回，然后執行 forEach 循環，包裝對象的屬性並運行您的斷言集。 使用這種方法，我注意到測試時間快了 10 秒。

任務代碼：

const axios = require('axios').default;
 // use axios
module.exports = (on, config) => {
  // `on` is used to hook into various events Cypress emits
  // `config` is the resolved Cypress config
  on('task', {
    //Work on request and return, learn what gets returned
    getURLBodyResponseContains: ({href, target}) => {
        return axios.get(href)
          .then( (response) => {
            //console.log('target: '+ target);
            if (response.data.match(target)) {
              return { answer: true, status: response.status };
            } else {
              return { answer: false, status: response.status };
            }
          })
          .catch((error) => console.log(error));  
    },

    getURLListBodyResponseContains: ({hrefList, target}) => {
     return Promise.all(hrefList.map((href) => {
// Would have wanted to reuse the task from above, but not sure you could reuse a  task within a task.
        return checkIfRequestContains(href, target);
      }))
        .then((result) => {
          return result;
        })
        .catch((error) => console.log(error));
    }
  })
}

function checkIfRequestContains(url, target){
  return axios.get(url)
  .then( (response) => {
    //console.log('target: '+ target);
    if (response.data.match(target)) {
      return { answer: true, status: response.status };
    } else {
      return { answer: false, status: response.status };
    }
  })
  .catch((error) => console.log(error)); 
}

測試代碼：

it('Test Language list', () => {
        const steamHeader = new SteamGlobalHeader(cy);

        steamHeader.getActionItem('span', 'language').click();

        steamHeader.getActionSection().get('#language_dropdown')
            .within(() => {
                const langList = /^schinese|tchinese|japanese|koreana|thai|bulgarian|czech|danish|german|spanish|latam|greek|french|italian|hungarian|dutch|norwegian|polish|portuguese|brazilian|romanian|russian|finnish|swedish|turkish|vietnamese|Steam Translation Server/;
                steamHeader.get('a[class="popup_menu_item tight"]').as('languageLinks');
                steamHeader.get('@languageLinks').should('have.length', 28);

                //This using task on whole array.
                let urlList = [];
                steamHeader.get('@languageLinks').each(($a) => {
                    urlList.push($a.prop('href'));
                });
                steamHeader.getCy().task('getURLListBodyResponseContains', {hrefList: urlList, target: langList}, {timeout: 100000}).as('returnValue');
                steamHeader.get('@returnValue').then(($value) => {
                    console.log($value);
                    $value.forEach((val) => {
                        console.log(val);
                        steamHeader.getCy().wrap(val).its('status').should('eq', 200);
                        steamHeader.getCy().wrap(val).its('answer').should('be.true');
                    })
                }); 


                //This approach using each loop
               /* steamHeader.get('@languageLinks').each(($a) => {
                    steamHeader.getCy().task('getURLBodyResponseContains', {href: $a.prop('href'), target: langList}, {timeout: 100000}).as('returnValue');
                    steamHeader.get('@returnValue').its('status').should('equal', 200);
                    steamHeader.get('@returnValue').its('answer').should('be.true');
                    
                }); */
            });

    })