Testing the capabilities of AngularJS with e2e testing using the angular-recaptcha library

I have been attempting to e2e test my basic application, but I am facing challenges with the angular-recaptcha plugin from VividCortex (https://github.com/VividCortex/angular-recaptcha).

Here is the test case I am working on:

  it('should redirect to another page', function() {

    browser.get('http://127.0.0.1:3000/#/');
    var userName = element(by.model('auth.loginInfos.username'));
    userName.sendKeys('<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="64070b0a1711090116552401070b4a070b09">[email protected]</a>');

    var password = element(by.model('auth.loginInfos.password'));
    password.sendKeys('consumer1');

    var recapt = element(by.id('recaptcha'));
    recapt.sendKeys();/* How do I set the recaptcha value to true? */

    var btn = element(by.className('btn'));
    btn.click();
    /**
     * Add your assertions here...
     */

  });

As you can see, I am trying to input the recaptcha value but don't know how to proceed.

Could you offer some guidance?

NOTE: I am using Protractor for this task.

Thank you for your assistance.

javascriptangularjsseleniumprotractor

Answer №1

Make sure to switch to the captcha iframe before attempting to verify it:

browser.switchTo().frame(0);

You can specify the frame index, name, id, or a previously identified frame element.

Here is a sample test using the recaptcha demo page:

"use strict";

describe("Recaptcha", function () {
    beforeEach(function () {
        browser.ignoreSynchronization = true;
        browser.get("http://vividcortex.github.io/angular-recaptcha/");
    });

    it("should click the captcha", function () {
        browser.switchTo().frame(0).then(function () {
            var checkbox = $(".recaptcha-checkbox-checkmark");

            // hover over the checkbox
            browser.actions().mouseMove(checkbox).perform();

            // introduce a delay
            browser.sleep(500);

            // simulate a human click
            checkbox.click();
        });

        // add expectations here
    });
});

In some cases, after clicking, you may need to select certain images as part of the captcha challenge. To bypass this challenge and successfully pass the captcha, consider the following suggestions based on how Google reCAPTCHA works:

  • Use a pre-loaded browsing profile with history
  • Ensure you are logged into a Google account during testing
  • Click the checkbox with an offset instead of directly
  • Add delays between actions to mimic human behavior

Remember, testing how the captcha functions is not typically part of end-to-end testing your application. Consider disabling or enabling the captcha for specific testing scenarios or user roles.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The MUI Slide Transition experiences a malfunction when using multiple Slide components simultaneously

I'm having trouble getting the animations to work for each mui Slide when the button is clicked. It seems like they don't want to cooperate and work together. Oddly enough, if you disable one of the slides, the other one starts working fine, but ...

javascriptreactjsmaterial-uislide

Moment.js generated an error due to an unhandled promise rejection warning

I'm trying to determine if my current timestamp is equal or greater than a certain value, but I keep encountering errors. Here's my code with the error: {...} exports.validaforgotpass = async (req, res) => { {...} const results = aw ...

javascriptmysqlnode.jsapimomentjs

What options do I have for personalizing this Google Bar Graph?

I am currently working on creating a Google bar chart. You can view my progress here: http://jsfiddle.net/nGvdB/ Although I have carefully reviewed the Google Bar Chart documentation available here, I am struggling to customize the chart to my needs. Spec ...

javascripthtmlajaxgoogle-visualization

$set { "array.variable.value" :"newvalue"} utilize a different term besides "variable" or implement a new variable

When working with mongoose to store user data, one of the attributes is an array called items. In my additems.js file: const User = require('../models/User'); var array = user.items; array.indexOfObject = function (property, value) { ...

javascriptnode.jsarraysmongodbmongoose-schema

Is React capable of storing and recognizing images within its system?

As a junior developer, I find this aspect confusing. Specifically, does reusing the same image on multiple routes in React result in the user downloading it more than once in the browser? I am striving to understand whether using the same image repeatedly ...

javascriptreactjsimageperformancebandwidth

When the margin-left changes, SVG begins to flicker and shake in a marquee effect

I've been experimenting with a marquee effect using vanilla JS. The effect is working, but I'm encountering some shaking issues with SVG and images as they move. <div class="marquee"> <h1>Nepal <svg version="1.1&qu ...

javascripthtmlcsscss-transitions

ElementNotVisibleException is a common issue that keeps popping up for me - it's frustrating!

I've exhausted all possible solutions, but I keep encountering the following error: org.openqa.selenium.ElementNotVisibleException: element not visible This error occurs for a specific web element (within a popup window) while running a Selenium scr ...

javaseleniumselenium-webdriverwebdriver

Issue with setting innerHTML of element in AngularJS app upon ng-click event

Look at this block of HTML: <div class="custom-select"> <div class="custom-select-placeholder"> <span id="placeholder-pages">Display all items</span> </div> <ul class="custom-select- ...

javascripthtmlangularjsinnerhtml

How can you simultaneously send FormData and String Data using JQuery AJAX?

Is there a way to upload both file and input string data using FormData()? For example, I have several hidden input values that also need to be included in the server request. html, <form action="image.php" method="post" enctype="multipart/form-data"& ...

javascriptphpjqueryajaxform-data

SmartEdit functions properly when spartacus is running using yarn start --ssl, but does not work without SSL enabled

I followed the smartedit setup instructions at and everything works well when I start the Spartacus server with yarn start --ssl. However, if I start the server with just yarn start, the storefront does not appear. See image here for reference ...

javascriptangular

Using jQuery Accordion within the MVC Framework

I'm new to MVC and considering using an accordion. However, I'm facing issues as the accordion does not appear despite adding all necessary references for jquery accordion and creating the div. Here is my code: @{ ViewBag.Title = "Online Co ...

javascriptjqueryhtmlcssasp.net-mvc

How to properly format an HTML input box for numeric entry and ensure correct formatting of the minus sign

I need assistance with formatting an HTML text input box to only accept numeric values using JavaScript. Specifically, the input should allow digits, a minus sign, or a dot/comma (which will be converted to a dot). However, I want to prevent multiple conse ...

javascripthtmlinputuser-input

Python Selenium for downloading zip files in a seamless manner

My goal is to retrieve the "administrative areas" data for every country from this particular website: . Although I am new to using the Python Selenium package, I believe the following code snippet should be sufficient to download the data for Afghanistan ...

pythonselenium

Installing the error package resulted in the following error: "Error: module 'nopt' not found."

After attempting to install node modules, I encountered the error message "Error: cannot find module 'nopt'." I tested various solutions, but none of them seemed to work. The image below shows the attached error message. { "name": "server", ...

javascriptnode.jsangularnpmnode-modules

`CSS animation for vanishing line effect`

I want to create an animated logo that gives the illusion of being pulled up by a rope, represented by a vertical black line, from the bottom of the page to the top. As the logo moves upwards, I would like the rope to disappear behind it, but I'm uns ...

javascriptcss

How come I am unable to reach the window in my Next.js application's '_app.js' file?

In my Next.js application, I am trying to implement a feature where the app loads and then checks for network access using a custom modal dialog that alerts the user if they lose internet connection. I have set up an _app.js file in my application to estab ...

javascriptreactjsnext.jsconsolewindow

Using ASP.NET MVC, pass a list of values separated by commas to an action method

Hey there, I'm facing an issue with an ajax call where I am trying to retrieve values from an html select multiple tag. The problem arises when I attempt to pass these values into my controller as I keep getting a null reference error in my controller ...

javascriptc#jqueryasp.netajax

Navigating Alerts in Webdriver: Global Solutions

Current Situation: While working on my automation suite, I encountered a frequent occurrence of alert boxes across different parts of the website as per business requirements. Instead of using try-catch blocks repetitively, I aim to streamline the proces ...

seleniumwebdriveralert

Incorporate Thymeleaf's HTML using the powerful JavaScript framework, jQuery

I am facing an issue where the Thymeleaf rendered HTML code is not being displayed by the Browser when I try to insert it using JavaScript. $('<span [[$ th:text#{some.property.key}]] id="counter" class="UI-modern"> </ ...

javascripthtmljquerythymeleaf

Send the user to a customized dashboard depending on their user role permissions using Vue.js

Currently, I am developing a system that involves handling multiple role-permissions for users. To provide some context, there are 3 distinct users in this scenario: User1 (customer), User2 (employee), and User3 (admin). For each of these user types, I ha ...

javascriptvue.jsauthenticationnuxt.js