The performance of CasperJS when used with AngularJS is subpar

If I click on just one button in Casper, everything works perfectly. The code below passes the test.

casper.then(function() {
    this.click('#loginB');
    this.fill('#loginEmailField', {
        'loginEmail':    '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2c3e2c38cc1cdcf">[email protected]</a>',
    }, false);
    this.fill('#loginPasswordField', {
        'loginPassword':    'a',
    }, false);
    this.click('#loginClickButton');
    this.click('#logoutB');
    test.assertNotVisible('#logoutB', "logout item should not be visible");
    test.assertNotVisible('#loggedInItem', "logged-in item should not show up");
    test.assertVisible('#loginB', "login item should be visible");
});

This second check also passes:

casper.then(function() {
    test.assertNotVisible('#loginModal', "login modal is not visible");
    this.click('#loginB');
    test.assertVisible('#loginModal', "login modal is visible now");
});

However, if a user clicks on the login button and then wishes to sign up, the signup module should appear. The tests below verify this but they fail:

casper.then(function() {
    this.click('#loginB');
    this.click('#signUpB');
    test.assertVisible('#signUpModal', "signup modal should be visible after clicking");
    test.assertVisible('#UsernameField', "Username field on the signup modal should also be visible");
    test.assertNotVisible('#loginModal', "login modal should disappear after clicking");
});

I have tested the website manually and can confirm that the signup modal does appear. What could be causing these failures?

javascriptangularjscasperjs

Answer №1

It appears that there is a timing issue at play here. While then* and wait* functions are asynchronous, most other functions are not. This results in the page needing to perform certain actions asynchronously when you use casper.click, which may not halt CasperJS from moving forward in the script.
It's interesting that the first two snippets worked for you.

To resolve this, you can either wait statically:

casper.thenClick('#loginB');

casper.wait(100, function() {
    this.click('#signUpB');
});

casper.wait(100, function() { // or adjust the time as needed
    test.assertVisible('#signUpModal', "signup modal is visible after click");
    test.assertVisible('#UsernameField', "Username field on the signup modal should be visible too");
    test.assertNotVisible('#loginModal', "login modal should be invisible after click");
});

You can also opt for a dynamic approach:

casper.thenClick('#loginB');

casper.waitUntilVisible('#signUpB', function() {
    this.click('#signUpB');
});

// Wait until the last selector that is generated to ensure others do not fail
casper.waitUntilVisible('#UsernameField', function() {
    test.assertVisible('#signUpModal', "signup modal is visible after click");
    test.assertVisible('#UsernameField', "Username field on the signup modal should be visible too");
    test.assertNotVisible('#loginModal', "login modal should be invisible after click");
});

Answer №2

After trying out Resurrectio, the CasperJS test recorder Chrome extension, I was pleased with the positive outcomes it brought to my project. Utilizing it in my AngularJS application resulted in smooth testing, with the initial test produced already utilizing casper.waitUntilVisible. This helped me avoid any timing issues, making the testing process much smoother and more efficient. Perhaps you could also find value in incorporating this tool into your workflow?

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 identical page content is displayed on each and every URL

Implementing a multi-step form in Next JS involves adding specific code within the app.js file. Here is an example of how it can be done: import React from "react"; import ReactDOM from "react-dom"; // Other necessary imports... // Add ...

javascriptreactjsnext.jsserver-side-rendering

Having trouble installing @angular/cli 4 on Debian?

I'm having trouble installing @angular/cli on my Debian box. I already have the latest versions of Node.js and npm installed. Interestingly, Angular4 works perfectly fine on my Windows machine where I use it daily. However, when I try to get it runnin ...

javascriptnode.jslinuxangulardebian

Retrieving information from a tag within an iFrame and passing it to its parent document

I've come across a few example posts on this topic, but for some reason, none of them are working for me. Here is the stack view of what I'm trying to accomplish: <html> <head>...</head> <body> <div>Som ...

javascriptjqueryiframe

Breaking down an array into groups - where did I go wrong in my code?

Check out the following code : function splitArrayIntoGroups(arr, size) { // Splitting the array into groups. var newArray = []; for(var i = 0; i < arr.length; i++){ for(var j = 0; j < size; j++){ newArray.push(arr.splice(0, size)); ...

javascriptarraysalgorithmloopslogic

Converting data to JSON geometry format for implementation in Three.js

Currently, I am in the process of creating an exporter using Maxscript to convert data into JSON format for use in Three.js. Information on this topic is scarce, but I did come across a helpful resource: https://github.com/mrdoob/three.js/wiki/JSON-Geometr ...

javascriptjsonthree.jsmaxscript

The kendo-ui numeric textbox is malfunctioning when set with a step value of 0.001

Having some issues with the Kendo UI numeric text box. Specifically, it doesn't seem to work properly when using a step value of 0.001. In the example code snippet below, I managed to get it to increment by 0.001 with HTML5 but couldn't make it w ...

javascriptkendo-ui

Using Inline Styling to Showcase a Background Image in a REACTJS Component

import React from 'react'; import Slick from 'react-slick'; import style from './Slider.module.css'; import {Link} from 'react-router-dom'; const SliderTemplates = (props) => { let template = null; const ...

javascriptcssreactjs

Encountering an error saying "Cannot read property 'x' of null when using Google Charts LineChart"

When I hover over the legend labels on my Google chart, I keep getting an error message that says "Cannot read property 'x' of null," and I'm not sure why. The data is all in JSON format from an AJAX GET request and does not contain any nul ...

javascriptjsonchartsgoogle-visualization

Clicking on a date in Vue.js Fullcalendar

My goal is to retrieve a date value from the onDateClick function of fullCalendar using vue.js and then pass this data to a prop that can be stored in my backend via Laravel. However, I am encountering various undefined errors no matter how I approach th ...

javascriptvue.jsfullcalendar

Using jQuery's .load() function to exclusively receive image bytecodes

I am utilizing jQuery's .load() function to receive the bytecode of loaded images. Could it be due to a lack of specified MIMEType? because I'm using an image URL without a file extension? necessary to wrap the entire operation somehow? Here& ...

javascriptjqueryhtmlajaxdom

Sharing NPM Scripts Via a Package to be Utilized by Project upon Installation

I have streamlined my linting setup by consolidating all configuration and related packages/plugins/presets (for prettier, stylelint, eslint, commitlint) into an npm package. This allows me to utilize the same setup across multiple projects, simply extendi ...

javascriptnpmpackage.jsonnpm-scripts

Top recommendation for ensuring that a component is not being displayed

Imagine a scenario where a component returns null in the render method based on a specific prop. How can you effectively use expect to ensure that the component is not rendered? For example: import React from 'react'; import { render, fireEvent ...

javascriptreactjsunit-testingtestingreact-testing-library

Changing a button's value on click using PhoneGap

I've been working with phonegap and came across an issue with my buttons setup like this: <input id="my_button" type="button" onclick="my_function();"/> The goal is to capture the click event and change the button's value, my_function ( ...

javascriptandroidbuttoncordovajquery-mobile

What is the best way to incorporate Bootstrap's datepicker into a website?

I'm currently working on an AngularJS application. Here is the code I have: <directive date="date" date-format="YYYY-MM-DD" > <input ng-model="Date" type="text"/> </directive> Is there a way to integrate an Angu ...

angularjshtmltwitter-bootstrapdatepicker

The transition from Vuetify3's VSimpleTable to VTable is ineffective and unsuccessful

The v-simple-table component has been renamed to v-table Old code that was using v-simple-table may not work correctly after the renaming. It is recommended to use v-data-table with the same data, as it works correctly. https://i.sstatic.net/3GVdYMWl.png ...

javascriptvue.jsvuejs3vuetify.jsvuetifyjs3

Guide on integrating AJAX with servlets and JSP for database-driven applications

What is the best way to integrate AJAX technology with servlets and JSP for a database application? I am currently developing a JSP page that makes calls to JavaScript. The JavaScript then calls a servlet where the database is accessed. How can I pass th ...

javascriptajaxjspservlets

Design layout in Angular Material that wraps the content within it

Is there a way to achieve this specific layout with the "plus" icon positioned below the card layout? https://i.sstatic.net/W5ZRM.png I have attempted the code below: <section layout="column" style="background-color: black;"> <md-c ...

angularjscssangular-material

Tips for displaying external JavaScript code in an alert box:

Is there a way to display external JavaScript code in an alert or another location by accessing the variable value s_code? (function(){ var newscript = document.createElement('script'); newscript.type = 'text/javascript'; ...

javascriptjavascript-objectsdom-events

Is there a way to update the value of a variable with the help of a checkbox?

When I check the checkbox, the specOrder const gets updated as expected. However, I am struggling to figure out how to remove the value when the checkbox is unchecked. Below is the code I have been working on: const SpecialtyBurgers = () => { cons ...

javascripthtmlreactjs

What could be causing my React component to only render after pressing ctrl + shift + R?

I am facing an issue with my chrome extension where it only appears after refreshing the page using ctrl + shift + r. However, there is a new problem that arises when I click on a link that refreshes the page, causing the extension to disappear and requiri ...

javascriptreactjsgoogle-chrome-extensionrenderchrome-extension-manifest-v3