赛普拉斯：每个循环的 request() 问题

Question

我正在使用 Cypress 开发一个测试框架并面临一个问题，我尝试执行一个each循环并且每次迭代都对 执行一个request函数<a> tag，然后执行一个断言响应包含来自regex表达式的特定值。我可以看到它开始执行请求链接，但显然响应的正文太大，以至于浏览器停止运行，视觉上显示 Cypress UI 冻结或似乎没有响应。（测试可能仍在运行，但 Cypress UI 似乎冻结或非常笨拙。）

我曾尝试寻找有关此问题的解决方案，但没有任何东西可以作为我困境的解决方案或替代方案。我想过使用 for each 循环来遍历标签，但我认为会比我现在拥有的更慢更糟。在与赛普拉斯合作时，有人遇到过这个吗？

代码：查看和验证列表内容链接的功能测试

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 包来处理获取请求并在内容与值匹配时返回布尔值以及状态代码。编辑：但是，我仍然看到断言由于列表中途或接近尾声的超时而失败。几天后我在 Steam 网站上再次测试了这个，现在我的测试运行可以在 1.5 分钟内完成而没有问题。我确实创建了一种替代方法来一次执行对所有链接的请求，而不是通过迭代。（完成时间至少快了 10 秒。）编辑：（旧方法）：在 cypress/plugins/index.js 中找到的任务：const axios = require('axios').default;&nbsp;// use axiosmodule.exports = (on, config) => {&nbsp; // `on` is used to hook into various events Cypress emits&nbsp; // `config` is the resolved Cypress config&nbsp; on('task', {&nbsp; &nbsp; //Work on request and return, learn what gets returned&nbsp; &nbsp; getURLBodyResponseContains: ({href, target}) => {&nbsp; &nbsp; &nbsp; &nbsp; return axios.get(href)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then( (response) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //console.log('target: '+ target);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (response.data.match(target)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return { answer: true, status: response.status };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return { answer: false, status: response.status };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .catch((error) => console.log(error));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; }})测试代码：it.only('Test Lanuage list', () => {&nbsp; &nbsp; &nbsp; &nbsp; const steamHeader = new SteamGlobalHeader(cy);&nbsp; &nbsp; &nbsp; &nbsp; steamHeader.getActionItem('span', 'language').click();&nbsp; &nbsp; &nbsp; &nbsp; steamHeader.getActionSection().get('#language_dropdown')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .within(() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 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/;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; steamHeader.get('a[class="popup_menu_item tight"]').as('languageLinks');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; steamHeader.get('@languageLinks').should('have.length', 28);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; steamHeader.get('@languageLinks').each(($a) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; steamHeader.getCy().task('getURLBodyResponseContains', {href: $a.prop('href'), target: langList}, {timeout: 100000}).as('returnValue');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; steamHeader.get('@returnValue').its('status').should('equal', 200);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; steamHeader.get('@returnValue').its('answer').should('be.true');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });新方法：几天后我重新测试了我的测试代码，现在我没有高频率地遇到超时问题。在尝试找出替代方案时，我想到了一种同时执行所有请求而不是一个一个执行请求的方法。请求全部完成后，将结果作为一个数组返回，然后执行 forEach 循环，包装对象的属性并运行您的一组断言。使用这种方法，我注意到测试时间快了 10 秒。任务代码：const axios = require('axios').default;&nbsp;// use axiosmodule.exports = (on, config) => {&nbsp; // `on` is used to hook into various events Cypress emits&nbsp; // `config` is the resolved Cypress config&nbsp; on('task', {&nbsp; &nbsp; //Work on request and return, learn what gets returned&nbsp; &nbsp; getURLBodyResponseContains: ({href, target}) => {&nbsp; &nbsp; &nbsp; &nbsp; return axios.get(href)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then( (response) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //console.log('target: '+ target);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (response.data.match(target)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return { answer: true, status: response.status };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return { answer: false, status: response.status };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .catch((error) => console.log(error));&nbsp;&nbsp;&nbsp; &nbsp; },&nbsp; &nbsp; getURLListBodyResponseContains: ({hrefList, target}) => {&nbsp; &nbsp; &nbsp;return Promise.all(hrefList.map((href) => {// Would have wanted to reuse the task from above, but not sure you could reuse a&nbsp; task within a task.&nbsp; &nbsp; &nbsp; &nbsp; return checkIfRequestContains(href, target);&nbsp; &nbsp; &nbsp; }))&nbsp; &nbsp; &nbsp; &nbsp; .then((result) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return result;&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; .catch((error) => console.log(error));&nbsp; &nbsp; }&nbsp; })}function checkIfRequestContains(url, target){&nbsp; return axios.get(url)&nbsp; .then( (response) => {&nbsp; &nbsp; //console.log('target: '+ target);&nbsp; &nbsp; if (response.data.match(target)) {&nbsp; &nbsp; &nbsp; return { answer: true, status: response.status };&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; return { answer: false, status: response.status };&nbsp; &nbsp; }&nbsp; })&nbsp; .catch((error) => console.log(error));&nbsp;}测试代码：it('Test Language list', () => {&nbsp; &nbsp; &nbsp; &nbsp; const steamHeader = new SteamGlobalHeader(cy);&nbsp; &nbsp; &nbsp; &nbsp; steamHeader.getActionItem('span', 'language').click();&nbsp; &nbsp; &nbsp; &nbsp; steamHeader.getActionSection().get('#language_dropdown')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .within(() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 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/;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; steamHeader.get('a[class="popup_menu_item tight"]').as('languageLinks');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; steamHeader.get('@languageLinks').should('have.length', 28);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //This using task on whole array.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let urlList = [];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; steamHeader.get('@languageLinks').each(($a) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; urlList.push($a.prop('href'));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; steamHeader.getCy().task('getURLListBodyResponseContains', {hrefList: urlList, target: langList}, {timeout: 100000}).as('returnValue');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; steamHeader.get('@returnValue').then(($value) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log($value);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $value.forEach((val) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(val);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; steamHeader.getCy().wrap(val).its('status').should('eq', 200);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; steamHeader.getCy().wrap(val).its('answer').should('be.true');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //This approach using each loop&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;/* steamHeader.get('@languageLinks').each(($a) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; steamHeader.getCy().task('getURLBodyResponseContains', {href: $a.prop('href'), target: langList}, {timeout: 100000}).as('returnValue');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; steamHeader.get('@returnValue').its('status').should('equal', 200);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; steamHeader.get('@returnValue').its('answer').should('be.true');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }); */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; })