"Protractor encountered an issue when navigating to the most up-to-date Angular section in our

We are in the process of upgrading our application from AngularJS to the latest version of Angular.

I am currently working on writing tests that transition from the AngularJS version of the app to the admin application, which is built using the latest version of Angular. Below is the test script I am attempting to execute:

describe('Admin App - Create Users', () => {
      beforeAll(async() => {
        await loginPage.login(companyUser, companyUserPwd)
        await common.navigationOpenByClick()
        await navPage.navigateToApp(AppParams.apps.admin.navLink)
        await admin.navigateAdmin('Users')
      })

      afterAll(async() => {
        await common.signOut()
      })

      _.forEach(CommonStrings.Strings.differentStrings, firstName => {
        it(`Create a New User First Name - ${firstName}`, async() => {
          await admin.createNewUser({
            userConfig: {
              firstName
            },
            clickSave: false
          })
          expect(admin.newUserAcceptBtn.getAttribute('disabled')).toBe(`true`)
          await admin.newUserCancelBtn.click()
        })
      })
}

In the beforeEach() hook, I attempt to navigate to the admin application and click on the Users link to access that specific section within the admin app. However, I encounter an error where it fails to click on the Users section, resulting in the following error message:

Failed: Error while waiting for Protractor to sync with the page: "both angularJS testability and angular testability are undefined.  This could be either because this is a non-angular page or because your test involves client-side navigation, which can interfere with Protractor's bootstrapping.  See http://git.io/v4gXM for details"

After reviewing the provided link, it appears that a redirect is causing this issue. I tried implementing different solutions mentioned in the error message but none seemed to resolve the problem.

browser.sleep() partially resolved the initial error, however, it led to encountering the allScriptsTimeout in my protractor.config file.

browser.refresh() did not provide a solution.

browser.wait(EC.urlContains('end of link to the admin application'))
helped eliminate the previous error, yet I faced the allScriptsTimeout once again.

I am seeking advice on additional approaches I can try to ensure the successful execution of this test suite.

Answer №1

To solve this issue, I made two changes within my beforeEach() function. Initially, after logging into the system, I directly navigate to the specific area of the application I need by using

await browser.get('/areaoftheapplication')
. Immediately following that, I include
await browser.waitForAngularEnabled(false)
which resolves the problem.

    beforeAll(async () => {
        await loginPage.login(companyUser, companyUserPwd)
        await browser.get('v2/admin')
        await browser.waitForAngularEnabled(false)
    })

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

Node functions continue to run smoothly without affecting the loop

I am working on a webdriverjs application and I am trying to determine when jQuery has finished its processes on the page. I have implemented some methods, but it seems that even when the condition is supposed to trigger an else statement and stop the loop ...

Is there an issue with Vue-router 2 where it changes the route but fails to update the view

I am currently facing an issue with the login functionality on a website that utilizes: Vue.js v2.0.3 vue-router v2.0.1 vuex v0.8.2 In routes.js, there is a basic interceptor setup router.beforeEach((to, from, next) => { if (to.matched.some(record ...

Using SVG Inline Style Conditionals in ReactJS

Would you say I have the conditional inline code set up correctly in this instance? The SVG icon is currently an x sign, but I want it to toggle to display a + sign. <svg viewBox='0 0 26 26' focusable='true' style={toggleShow ? { tra ...

Exploring sections of a GLTF import within the primary rendering loop (apologies for any beginner questions)

As a Unity developer venturing into learning Three.js, I've come across a seemingly simple yet frustrating issue. My goal is to import and animate a 3D logo consisting of four separate meshes (elem1 to elem4) in my Three.js application. After exporti ...

Unattractive destructuring during conditional assignment

When working with object properties, ESLint often suggests using object destructuring. However, this can sometimes result in redundant lines of code. ESLint may not allow something like the following (which might seem like the preferable approach): const ...

Leveraging the const keyword within a for loop

Imagine having the following snippet of code: for (let i=0; i<1000; i++) { //Retrieve row from MongoDB **const** foo = Collection.find({index:i}); } vs for (let i=0; i<1000; i++) { //Retrieve row from MongoDB **let** foo = Collection ...

What is the best way to calculate the number of items in your mongoose reference with a specific field?

I am trying to calculate the number of active Workers that belong to a specific company. Here is an example scenario: const workerSchema = new Schema( { userId: { type: Types.ObjectId, ref: 'User', ...

Observable map encounters an error when attempting to retrieve essential data from the backend server

Here is my approach: getDropdownData(id: number | 195731): Observable<ClinicTrialSettingProp> { return this.http .get<ClinicTrialSettingProp>(this.commonPatientURL + id + '/clinic-trials') .pipe(map(response => res ...

Issue detected in the ngx-joyride package: Error found in ./node_modules/ngx-joyride/assets/images/close.svg

During my build process, I encountered an error with ngx-joyride: ERROR in ./node_modules/ngx-joyride/assets/images/close.svg Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type." <line x1="1" y1=" ...

Encountering a problem with Firebase file uploading when using the "express-fileupload" library

Attempting to upload files using "firebase-admin" in combination with "express-fileupload". All Firebase and express-fileupload configurations have been properly set up: My required libraries: const firebaseAdmin = require("fireba ...

Tips for identifying the most effective element locator in the DOM with Playwright

Currently, I am in the process of incorporating Playwright tests for a website that supports multiple locales. The majority of the page content is dynamically generated from CMS content (Contentful). I am hesitant about using hardcoded text locators like ...

Using a combination of nested fetch() and array.map() does not allow for the return

My previous coding experience didn't present any issues with rendering HTML. Typically, I only needed to use one fetch() function. However, in this particular scenario, it appears that I require two fetch calls. The first fetch retrieves a product ID ...

PassportJS ensuring secure authentication across all routes

Currently, I am implementing passportJS to secure my API Endpoints within an Express application. So far, the following code is functioning properly. app.get("/route1", passport.authenticate('basic', { session: false }), (req, res) => { ...

When trying to run the code locally, JS and Bootstrap seem to have trouble functioning together, despite

Check out my codepen project here: https://codepen.io/ldrumsl/pen/ZxdZwa Below is the JavaScript code: $('#datetimepicker1').datetimepicker(); $('#datetimepicker2').datetimepicker(); Downloaded index.html file content: <!DOCTYPE ...

Managing URL patterns in AngularJS ui.router: Tips and Tricks

When utilizing the "ui.router" angular JS module, does this mean that the module will have complete control over all URL navigation on the entire page? Currently, I am using the $stateProvider.state method to define URL and State mappings. However, it see ...

Can you provide instructions on how to display data in two lines within a mat-select field?

Is it possible to show selected options in mat-select with long strings in two lines within the same dropdown? Currently, the string appears incomplete. You can see an example of this issue here: incomplete string example <mat-form-field class="f ...

The way jQuery and CSS are rendered in the same browser window can vary depending on whether they are loaded via Django or statically

Experiencing a perplexing dilemma. While viewing a web page created using html, jquery, and css on the same browser but in two separate tabs, I am encountering varying renderings of the page. Scenario 1: Directly loading the html file from the file system ...

Adjust the CSS property of a div to have a fixed position when scrolling

I attempted to implement a fixed div on scroll in Vue.js using the following code: ... async created() { window.addEventListener('scroll', this.calendarScroll); } methods: { calendarScroll() { console.log('Scroll'); cons ...

The firebase-admin module encounters compatibility issues with middleware due to the OS Module

I'm facing a major issue with my API implementation. I am working on integrating an authentication and verification middleware, but the problem arises when using firebase-admin due to its dependencies on Edge Runtime modules that are incompatible with ...

Setting the state based on Promise values within a loop

I am currently facing a challenge in my React project where I am using axios to interact with an external API. The goal is to loop through the array of objects retrieved from the API call and utilize the values returned by a separate function within the ...