Cypress测试遇Webpack编译错误：无法解析'request'模块求解决

正在学习使用Cypress对Bestbuy网页执行简单测试，最初遇到页面无法加载的问题，参考GitHub方案添加axios库相关代码后，出现Webpack编译错误，现寻求该错误的解决方法。

Cypress运行器错误信息 #

Error: Webpack Compilation Error
Module not found: Error: Can't resolve 'request' in '/Users/michelle/CypressNovember/cypress/e2e'
    at Watching.handle [as handler] (/Users/michelle/Library/Caches/Cypress/13.5.1/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-preprocessor/dist/index.js:212:23)
    at /Users/michelle/Library/Caches/Cypress/13.5.1/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Watching.js:303:9
    at Hook.eval [as callAsync] (eval at create (/Users/michelle/Library/Caches/Cypress/13.5.1/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/michelle/Library/Caches/Cypress/13.5.1/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/Hook.js:18:14)
    at Watching._done (/Users/michelle/Library/Caches/Cypress/13.5.1/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Watching.js:299:28)
    at /Users/michelle/Library/Caches/Cypress/13.5.1/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Watching.js:213:21
    at Compiler.emitRecords (/Users/michelle/Library/Caches/Cypress/13.5.1/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:919:5)
    at /Users/michelle/Library/Caches/Cypress/13.5.1/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Watching.js:191:22
    at /Users/michelle/Library/Caches/Cypress/13.5.1/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:885:14
    at Hook.eval [as callAsync] (eval at create (/Users/michelle/Library/Caches/Cypress/13.5.1/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/michelle/Library/Caches/Cypress/13.5.1/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/Hook.js:18:14)
    at /Users/michelle/Library/Caches/Cypress/13.5.1/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:882:27
    at /Users/michelle/Library/Caches/Cypress/13.5.1/Cypress.app/Contents/Resources/app/node_modules/neo-async/async.js:2818:7
    at done (/Users/michelle/Library/Caches/Cypress/13.5.1/Cypress.app/Contents/Resources/app/node_modules/neo-async/async.js:3522:9)
    at alreadyWritten (/Users/michelle/Library/Caches/Cypress/13.5.1/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:714:8)
    at /Users/michelle/Library/Caches/Cypress/13.5.1/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:802:19
    at /Users/michelle/Library/Caches/Cypress/13.5.1/Cypress.app/Contents/Resources/app/node_modules/graceful-fs/graceful-fs.js:123:16
    at /Users/michelle/Library/Caches/Cypress/13.5.1/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/graceful-fs.js:123:16
    at /Users/michelle/Library/Caches/Cypress/13.5.1/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3)

测试代码（含axios相关逻辑） #

/// <reference types="cypress"/>

describe("Set a defaul store of Bestbuy", () => {

    before("to load the page", () => {

    })

    //numbers right
    //Real city in US
    //city close to US
    //real state
    //state close to US
    it("Set a defaul store (Happy path)", () => {
        const request = require('request');
        const axios = require('axios');
        const url = 'http://www.bestbuy.com/';
        request({
            url: url,
            timeout: 5000,
            headers: {
                "Accept": "application/json, text/plain, */*",
                "User-Agent": "axios/0.18.0"
            }
        }, (error, response, body) => {
            if (!error)
                console.log(`request got ${response.statusCode}`);
            else
                console.error(`request got an error`, error);
        });

        axios.get(url).then((ret) => {
            console.log(`Axios got ${ret.status}`);
        });
        //cy.visit("https://www.bestbuy.com")
        cy.get(".location-zip-code-form-content input").type("22897")
        cy.get(".location-zip-code-form-content button").click()
    })

    it("empty zip")
    it("Use my current location")
    it("invalid zip")
    //not exist (only numbers but is not a real zip)
    //no good format, between parentesis, with a leter, special characters -> display an error message
    //short number -> display an error message
    //long number -> display an error message
    //correct zip but with a space at the end or at the begining -> should display results
    it("Use city name")
    //3 differt cities in US

    it("Base on category")
    it("filter by devices")

})

e2e.js文件 #

// ***********************************************************
// This example support/e2e.js is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************

// Import commands.js using ES2015 syntax:
import './commands'

// Alternatively you can use CommonJS syntax:
// require('./commands')

//codigo para ocultar los fetch de xhr
const app = window.top;
if (!app.document.head.querySelector("[data-hide-command-log-request]")) {
const style = app.document.createElement("style");
style.innerHTML =".command-name-request, .command-name-xhr { display: none }"; style.setAttribute("data-hide-command-log-request", ""); app.document.head.appendChild(style);
}

cypress.config.js文件 #

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
    //this configure thet I can see files with extension js,jsx,ts,tsx, and spec in the cypress test runner
    specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx,spec}'
  },
});

package.json文件 #

{
  "name": "cypressnovember",
  "version": "1.0.0",
  "description": "",
  "main": "cypress.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "cypress": "^13.5.1"
  },
  "dependencies": {
    "axios": "^1.6.2"
  }
}

文件目录结构 #

不清楚是否需要修改文件路径或采取其他操作来解决该问题。

内容的提问来源于stack exchange，提问作者michelle acevedo