Analyzing the interaction of AngularJS across different pages

I am currently working on an Angular application that consists of a login page and a landing page. My goal is to create a Protractor assertion that can verify the successful login and ensure that the landing page displays correct content.

The login process involves checking for a valid user via a JSON call to an endpoint. Once validated, it redirects to the landing page. This functionality performs as expected outside of testing. However, when running the assertion test case provided below, it seems to halt during the waiting period and completes without actually asserting anything:

//Attempting login with valid credentials
it('should attempt to login with valid credentials', function() {
    element(by.css('#login_username')).sendKeys('testusername');
    element(by.css('#login_password')).sendKeys('testpassword');
    element(by.css('.btn-default')).click();

    browser.driver.sleep(20000);

    //Checking heading on landing page
    expect(by.css('h1').html()).toEqual("Landing");

});

I'm unsure whether submitting the form button should be sufficient to pause Protractor while the next page loads, or if there's a step missing in my test setup. Any suggestions on how to proceed would be greatly appreciated.

javascriptangularjstestingprotractor

Answer №1

I am uncertain if this will be successful

//Trying to sign in using a valid Username and Password
it('will try signing in with correct credentials', function() {
    element(by.css('#login_username')).sendKeys('testusername');
    element(by.css('#login_password')).sendKeys('testpassword');
    element(by.css('.btn-default')).click();

    //Checking for H1 on landing page
    expect(by.css('h1')).then(function (event) {
        toEqual("Landing");
    });
});

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

Top method for transforming an array into an object

What is the optimal method for transforming the following array using JavaScript: const items = [ { name: "Leon", url: "../poeple" }, { name: "Bmw", url: "../car" } ]; into this object structure: const result = ...

javascripttypescriptalgorithmdata-structures

A scenario in a Jasmine test where a function is invoked within an if statement

My coding dilemma involves a function: function retrieveNames() { var identifiers = []; var verifyAttribute = function (array, attr, value) { for (var i = 0; i < array.length; i++) { if (array[i][attr] === va ...

javascriptangularjsunit-testingjasminekarma-jasmine

Reusing methods in Javascript to create child instances without causing circular dependencies

abstract class Fruit { private children: Fruit[] = []; addChild(child: Fruit) { this.children.push(child); } } // Separate files for each subclass // apple.ts class Apple extends Fruit { } // banana.ts class Banana extends Fruit { } ...

javascriptnode.jstypescript

Dynamic property access using optional chaining in JavaScript

My attempt to utilize optional chaining, a feature provided by TypeScript for safely accessing dynamic properties, seems to be invalid. export const theme = { headers: { h1: { }, h6: { color: '#828286' }, }, } console.in ...

javascripttypescriptstyled-componentsoptional-chaining

Update the field's status to non-editable when the radio button is chosen, without using jQuery

My form contains a mix of normal and read-only fields. Additionally, there is a radio button with two options. If the default option is selected, nothing changes. However, if the second option is chosen, the read-only fields should become editable. The ch ...

javascriptphp

Display an alert box in the parent window from an Iframe using jqModal canceled action

I'm currently working on a web page that includes an iFrame. I have complete access to both the parent window and the content within the iFrame. Within the iFrame, there is a jqModal cancel box that appears when the user enters invalid input. However, ...

c#javascriptjqueryasp.netjqmodal

Do AngularJS routes allow the use of special characters in URLs?

Issue at hand: Every time I enter http://localhost:53379 in the browser, it redirects me to http://localhost:53379/#/. Why is the /#/ being added? angular .module('app', ['ngRoute', 'ngStorage']) .config([&apo ...

javascriptangularjshtml

Boost your website's loading time by utilizing the async and defer attributes

Looking to enhance the speed of my webpage, particularly focusing on improving initial page speed. Research suggests that using the async and defer attributes for JavaScript can be beneficial. All JavaScript scripts are currently placed just above the cl ...

javascriptcsshtmlsrc

Tips for creating a responsive Livewire Pagination system

Looking to make Livewire pagination responsive? When using Bootstrap, simply add flex-wrap to the pagination class to ensure responsiveness. Component: class Index extends Component { use WithPagination; protected $paginationTheme = 'bootstr ...

javascriptphplaravellaravel-livewire

Is it possible to remove a specific directory from the webpack build configuration in a vue-cli-3 setup?

After spending 3 hours adding the line: exclude: ['./src/assets/sass'] in 20 different places, I am seeking guidance on where it should actually be placed. Below is my current setup for the css-loader (util.js): 'use strict' const path ...

javascriptvue.jswebpackvue-cli-3

In PATCH requests, JSON data is not transmitted through Ajax

I'm attempting to send JSON data from the client to my server with the following code: $.ajax({ url : 'http://127.0.0.1:8001/api/v1/pulse/7/', data : data, type : 'PATCH', contentType : 'application/json' ...

javascriptjqueryajax

Creating a tree array in JavaScript from JSON data

I have been struggling to create a tree array from the given JSON data. I have attempted to use filter, map, and reduce methods, but haven't been successful in achieving the desired result. [{ "code": "2", "name": "PENDING" },{ "code": "2.2", ...

javascriptjsonmultidimensional-array

Showing content from a JavaScript variable once a button has been clicked

Imagine you are using express.js and have a JavaScript variable embedded in an ejs file like this: <%= someVariable %> How can you display the value from this variable on the same page, for instance within a bootstrap modal element (check out https: ...

javascripthtmlnode.jsexpressejs

Loading JSON data in AngularJS before parsing and loading HTML content from it

Greetings, I am new to Angular and seeking some guidance. My goal is to limit a list of notifications to three using limitTo, and then load the rest when a button is clicked. Currently, I am unsure about the following: How to set up the "view" and appl ...

javascripthtmlangularjs

Issue with findOneAndUpdate: document is not being updated and the function is returning null

Hello everyone, I am diving into the world of mongodb and mongoose for the first time. I could really use some assistance with a problem that has me stuck. Here's the issue at hand: Below is a snippet of my code where I have an addressSchema along w ...

javascriptnode.jsmongodbexpressmongoose

Removing items from a todo list in JSX without relying on props or state

I am facing a challenge with utilizing a function to delete an item from an array when clicking the delete button. I am seeking a solution without relying on props or state. Could someone please point out where I may be making a mistake? The item appears ...

javascriptreactjsreact-hooksjsx

Variety of part ingredients

In my component, I have a button and include another component which also contains a button. How can I align these two buttons next to each other without using absolute positioning? When I try positioning them using absolute right and top values, the lay ...

javascripthtmlcssangularangular2-template

AngularJS JSON Array

I have an array containing multiple objects in JSON, as well as a select element that contains an array. Depending on the selection made in the first array, another select box will be dynamically loaded right below it. HTML Code <div class="list"> ...

javascriptarraysjsonangularjs

Press `Enter` to confirm your selection in the BootstrapVue message box input box

Using Vue version v2.6.12 BootstrapVue version v2.21.2 Is there a way to confirm by pressing Enter instead of manually clicking OK? let text this.$bvModal.msgBoxConfirm(<input vModel={text} />) https://i.sstatic.net/7XxOl.png ...

javascriptvue.jsvuejs2jsxbootstrap-vue

Why is it that servlets are unable to send custom JSON strings, and why is it that Ajax is unable to receive them?

I have developed a servlet that responds with a simple JSON list: public void addCategory(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { logger.log(Level.INFO, "Adding the category"); ObjectifyS ...

javascriptjqueryajaxjsonservlets