Cypress - Not able to open client URL which is accessible only through VPN

[navdeepdevrepublic]

Current behavior

There is one URL which is accessible only in Europe and outside Europe we are accessing this URL via windows 10 built-in VPN
however when I am connecting VPN and run the cypress spec file it is throwing below error.

View Stack Trace:
at <unknown> (http://localhost:60838/__cypress/runner/cypress_runner.js:156621:85) at visitFailedByErr (http://localhost:60838/__cypress/runner/cypress_runner.js:155942:13) at <unknown> (http://localhost:60838/__cypress/runner/cypress_runner.js:156601:14) From previous event: at go (http://localhost:60838/__cypress/runner/cypress_runner.js:156599:18) at <unknown> (http://localhost:60838/__cypress/runner/cypress_runner.js:156669:21) From previous event: at visit (http://localhost:60838/__cypress/runner/cypress_runner.js:156667:39) at Context.visit (http://localhost:60838/__cypress/runner/cypress_runner.js:156676:15) From Your Spec Code: at Context.eval ([webpack:///./cypress/e2e/specs/login.cy.js:13:12](http://localhost:60838/__/#))

Note: There is a Sophos firewall managed in our organization which might be interrupting, for reference please see this Sophos support team discussion https://community.sophos.com/intercept-x-endpoint/f/discussions/134136/sophos-network-threat-detection-is-blocking-cypress-automation-tool/494845#494845

And I have tried the solution provided in https://docs.cypress.io/guides/references/proxy-configuration however the VPN is username and password protected, I have tried mentioning the same in HTTP_PROXY and HTTPS_PROXY Environment Variables
in this format: username:password@proxyIP:port and also in the simple format provided in the cypress proxy config docs.

When I am configuring the simple proxy settings, (Windows 10 built-in VPN is either connected OR disconnected), the error message changed as below:

View Stack Trace:
at <unknown> (http://localhost:59860/__cypress/runner/cypress_runner.js:156638:83) at visitFailedByErr (http://localhost:59860/__cypress/runner/cypress_runner.js:155942:13) at <unknown> (http://localhost:59860/__cypress/runner/cypress_runner.js:156637:12) From previous event: at go (http://localhost:59860/__cypress/runner/cypress_runner.js:156599:18) at <unknown> (http://localhost:59860/__cypress/runner/cypress_runner.js:156669:21) From previous event: at visit (http://localhost:59860/__cypress/runner/cypress_runner.js:156667:39) at Context.visit (http://localhost:59860/__cypress/runner/cypress_runner.js:156676:15) From Your Spec Code: at Context.eval ([webpack:///./cypress/e2e/specs/login.cy.js:13:12](http://localhost:59860/__/#)) From Node.js Internals: Error: A connection to the upstream proxy could not be established: connect ETIMEDOUT 213.126.XXX.202:443 at C:\Users\Navdeep (Singh\AppData\Local\Cypress\Cache\10.0.3\Cypress\resources\app\packages\network\lib\agent.js:234:30) at C:\Users\Navdeep (Singh\AppData\Local\Cypress\Cache\10.0.3\Cypress\resources\app\packages\network\lib\agent.js:44:21) at retry (C:\Users\Navdeep Singh\AppData\Local\Cypress\Cache\10.0.3\Cypress\resources\app\packages\network\lib\connect.js:69:25) at TLSSocket.onError (C:\Users\Navdeep Singh\AppData\Local\Cypress\Cache\10.0.3\Cypress\resources\app\packages\network\lib\connect.js:80:14) at Object.onceWrapper (node:events:510:27) at TLSSocket.emit (node:events:390:29) at TLSSocket.emit (node:domain:475:13) at emitErrorNT (node:internal/streams/destroy:157:9) at emitErrorCloseNT (node:internal/streams/destroy:122:4) at processTicksAndRejections (node:internal/process/task_queues:83:22)

Also, I am able to cURL the website and I am getting response either windows 10 built-in VPN is connected or not.

Desired behavior

No response

Test code to reproduce

import { default as loginPage } from "../../support/pageObjects/loginPage"

describe('Login',()=>{

before(()=>{

})

it('Verify that user should be able to login',()=>{

    cy.visit(Cypress.env('login_url'))
    new loginPage().getTextField_LoginName().type('Johan')
    new loginPage().getTextField_Password().type('Devhercules@123')
    new loginPage().getButton_Submit().click()
})

})

Cypress Version

10.0.3

Other

For reference, #21595

[rachelruderman]

Hi @navdeepdevrepublic , thank you for reporting! Are your tests also failing on Electron? Asking because I noticed someone in the Sophos Community support thread mentioned

I can confirm that the tests run fine if I use the electron browser

[navdeepdevrepublic]

Hi @rachelruderman
I have tried running with Electron however it didn't work, below are the artifacts.
Scenario 1: Either VPN is connected OR disconnected
Case 1: When Test Runner is opened first time

Case 2: When you use refresh button and ran the same test again

Scenario 2: When HTTP_PROXY and HTTPS_PROXY settings are done
Case 1: Proxy settings mentioned in cypress proxy docs http://<proxy>

Case 2: The format of proxy settings in environment variables: http://<username>:<password>@<proxy>:<port>

One quick question: Since I am able to access this external URL in India with VPN which is running fine in Europe without VPN, do you think I need to use proxy settings mentioned in cypress docs to access this URL in cypress? OR this URL should be accessible in cypress just if the windows 10 built-in VPN is connected, I am not sure of this, please guide me.

[rachelruderman]

@navdeepdevrepublic I've passed your issue along to the team and they say:

1. You don't need to use the proxy config since it doesn't seem to work
2. It seems like an app issue possibly stemming from incorrect/missing authentication, hence the 403

We recommend trying failOnStatusCode: false with your cy.visit: https://docs.cypress.io/api/commands/visit#Syntax) since it will let you render the actual 403 page, which may have a more specific error message

[mjhenkes]

@navdeepdevrepublic, Could you try the possible solution above and get back to us? Is this a new issue introduced in cypress 10?

[navdeepdevrepublic]

Hi @rachelruderman @mjhenkes Thank you for your response, I have applied the above solution and found hCaptcha (Need to click on Images) issue to access the client website (in Electron only however in Chrome -> not able to access the client website even after manually clearing the hCaptcha).

Can you please propose the solution for hCaptcha?

Note: I have tested the same in old cypress version 8.7.0 and 10.2.0

[tbiethman]

Hi @navdeepdevrepublic, we document our recommendations for visiting external sites here. There are also some suggestions from the community that have run into similar issues. Can you take a look at these and see how they may apply to your specific scenario?

[navdeepdevrepublic]

Hi @tbiethman The solution link of Stack Overflow provided by you is of 'Google ReCaptcha' however I have issues with 'hCaptcha', any solution to handle 'hCaptcha'?

[tbiethman]

@navdeepdevrepublic I'm not aware of any hCaptcha-specific integrations or workarounds with Cypress. You could try raising the issue in our Discord channel to see if other users may have worked with hCaptcha. But without a minimal reproduction or more technical details, it is hard for me to investigate further.

[navdeepdevrepublic]

Hi @tbiethman
Regarding the hCaptcha integration with cypress, I have followed the below links
https://www.npmjs.com/package/puppeteer-hcaptcha
https://github.com/aw1875/puppeteer-hcaptcha/blob/master/demos/solve.js
https://www.techtonic.com/puppeteer-can-fill-in-cypress-gaps/
https://jsoverson.medium.com/bypassing-captchas-with-headless-chrome-93f294518337

I am installing the 'puppeteer hCaptcha' through npm and the code is as below:
File :- cypress.config.js

const { defineConfig } = require("cypress");
const puppeteer = require("puppeteer-extra");
const pluginStealth = require("puppeteer-extra-plugin-stealth");
const { hcaptcha } = require("puppeteer-hcaptcha");
const { hcaptchaToken } = require("puppeteer-hcaptcha");

module.exports = defineConfig({
  e2e: {
    env: {
      login_url: 'https://acceptatie.axxxxxxx.eu/'
    },
    chromeWebSecurity: false,
    pageLoadTimeout: 170000,
    defaultCommandTimeout: 10000,
    setupNodeEvents(on, config) {
    on('task', {
        url(visitURL) {
          let token = '';
          return new Promise((resolve, reject) => {
            try {
              (async () => {
                const browser = await puppeteer.launch({
                  ignoreHTTPSErrors: true,
                  headless: false,
                  args: [
                    `--window-size=1000,1000`,
                    "--window-position=000,000",
                    "--disable-dev-shm-usage",
                    "--no-sandbox",
                    '--user-data-dir="/tmp/chromium"',
                    "--disable-web-security",
                    "--disable-features=site-per-process"
                  ],
                });
                const [page] = await browser.pages();
                await page.goto(visitURL)
                await page.waitForSelector('#ucLoginSimple_tbLoginName');
                await page.$eval('#ucLoginSimple_tbLoginName', el => el.value = 'Navdeep');
                await page.waitForSelector('#ucLoginSimple_tbPassword');
                await page.$eval('#ucLoginSimple_tbPassword', el => el.value = 'Dexxxx@123');
                await page.waitForSelector('#ucLoginSimple_btnLogin');
                await page.click('#ucLoginSimple_btnLogin');
                await hcaptcha(page);
                token = await hcaptchaToken(visitURL);
                console.log('token is ' + token)
                await browser.close();
                resolve(token);
              })();
            } catch (e) {
              reject(e);
            }
          });
        }
      })
    },
  },
});

The spec file is login.cy.js

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

import createCar from "../../support/pageObjects/createCar"
import homePageMenus from "../../support/pageObjects/homePageMenus"
import { default as loginPage } from "../../support/pageObjects/loginPage"

describe('Login',()=>{

    it('Verify that user should be able to login and create a car',()=>{
        cy.task('url','https://acceptatie.axxxxxx.eu/').then((token)=>{
            console.log(token)
        })
    
    })
})

Current Behavior: When I run the spec file i.e. login.cy.js The test runner opens and it further launches the separate Chrome window (as per the browser launch mentioned in cypress.config.js). It opens the client website and perform the steps (logged in successfully) mentioned in cypress.config.js (Given: the widows in-built VPN is connected). After a few seconds, the automated chrome gets closed and there is below error.

Desired Behavior: I wanted to get the token returned by browser so that I can use that token to perform the further tests.

Can you please look into this?

[navdeepdevrepublic]

Hi @tbiethman
Update on the above comment: The above issue appears because of the below code line in cypress.config.js
await hcaptcha(page);

If I comment these lines i.e. await hcaptcha(page); and await browser.close(); there is no crash however the test runner throws the below error.

cy.task('url') failed with the following error:

The task 'url' returned undefined. You must return a value, null, or a promise that resolves to a value or null to indicate that the task was handled.

The error screenshot is as below:

The above could be because of no hCaptcha page appears while running with puppeteer however when I am accessing the same client URL in test runner, hCaptcha page appears, below is the screenshot.

Moreover I have asked the developers to turn off the hCaptcha service on acceptance environment however client denied.