CODEWITHSUNDEEP
webpackaxioscypress
michelle acevedo
michelle acevedo

Reputation: 1

Error: Webpack Compilation Error Module not found: Error: Can't resolve 'request' in cypress

I'm learning how use cypress. I'm running a simple test on the Bestbuy web page. But I wasn't able to load the page. It say a fix adding a piece of code releated to axios library (I took it from here https://github.com/request/request/issues/2738). But now I got an error of Webpack. how fix the webpack error?

error message from cypress runner

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)

This is my code including the axios code

/// <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"
  }
}

My files tree

I don't know if I need to change a path of a file or what to do

Upvotes: 0

Views: 2351

Answers (1)

Lola Ichingbola
Lola Ichingbola

Reputation: 4986

You do not need to require('request') it is built in to Cypress.

Just add cy. in front of request.

I can't tell what you are trying to do, but here's a simple example.

it("Set a default store (Happy path)", () => {
  const url = 'http://www.bestbuy.com/';
  cy.request({
    url, 
    timeout: 5000,
    headers: {
      "Accept": "application/json, text/plain, */*",
      "User-Agent": "axios/0.18.0"
    },
    failOnStatusCode: false
  })
  .then(response => {
     if (response.statusCode >= 400)
       console.log(`request got ${response.statusCode}`)
     } else {
       expect(response.body).not.to.eq(undefined)
     }
  })

Ideally, you want to use cy.visit() instead

it("Set a default store (Happy path)", () => {
  const url = 'http://www.bestbuy.com/';
  cy.visit({
    url, 
    timeout: 5000,
    headers: {
      "Accept": "application/json, text/plain, */*",
      "User-Agent": "axios/0.18.0"
    },
    failOnStatusCode: false
  })

  // now test the loaded page
})

Upvotes: 3

Related Questions