Not able to handle hCaptcha with the client website

[navdeepdevrepublic]

Current behavior

It displays the hCaptcha page and the one has to manually resolve the hCaptcha with images in order to proceed.

Desired behavior

In this situation, Cypress should have any workaround or third party integration so that this hCaptcha should get handled.

Test code to reproduce

I have tried opening the page with Puppeteer (Integration with Cypress), it worked well however I had trouble sending the token back to the cypress spec file.

Note: 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

Below is the code:

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)
        })

    })
})

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.

Cypress Version

10.3.0

Other

package.json

{
  "name": "axxxxxox",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Navdeep",
  "license": "ISC",
  "devDependencies": {
    "cypress": "^10.3.0",
    "puppeteer-hcaptcha": "^3.0.6"
  }
}

[BlueWinds]

The error says that your task is returning undefined, which definitely doesn't look right - you show it returning a Promise, which seems correct.

My steps to troubleshoot would be to start simple - with a task that returns a string. If that's working, then a promise that resolves to a string. Add in the pupeteer code bit by bit until you figure out what exactly is going wrong.

That's all common debugging advice, because the code above isn't quite enough for me to reproduce the issue - I don't happen to have a site with hcatcha enabled. If you can provide a sample repository I can run, I'd be happy to look into it more, but beyond that I can only offer the above tips to help debug the problem yourself. It's probably something simple and obvious that we're both just being blind to.

[tbiethman]

@navdeepdevrepublic, we are beginning to implement a policy to close non-reproducible issues within 7 days of inactivity. Unfortunately, if we cannot reproduce an issue there isn't a whole lot that we can do, and in an effort to keep our issue backlog manageable we will be closing the issue.