Protractor does not load the page correctly

Question

After clicking on the confirmation button, the next screen should display a confirmation message. But protractor just loads the page without display this confirmation. The strange thing is that I have the same code for other pages, and in all of them, Protractor works fine. It is an Angular website, as you can see on the screenshot

This is my conf file

var HtmlScreenshotReporter = require('protractor-jasmine2-screenshot-reporter');

var reporter = new HtmlScreenshotReporter({
  dest: 'target/screenshots',
  filename: 'my-report.html'
});


// An example configuration file.
exports.config = {
  directConnect: true,
  getPageTimeout : 12000000,

  capabilities: {
    "browserName": 'chrome',
        chromeOptions: {

        mobileEmulation: {
            "device": 'Zebra TC20',
            "deviceMetrics": {
                "width": 340,
                "height": 440,
                "pixelRatio": 3.0
            }
        }
    }
},
SELENIUM_PROMISE_MANAGER: true,

   // Framework to use. Jasmine is recommended.
   framework: 'jasmine',

  specs: ['../tests/ReturnToVendor.js'],

  // Options to be passed to Jasmine.
  jasmineNodeOpts: {
    defaultTimeoutInterval: 150000
  },

  // Setup the report before any tests start
  beforeLaunch: function() {
    return new Promise(function(resolve){
      reporter.beforeLaunch(resolve);
    });
  },

  // Assign the test reporter to each running instance
  onPrepare: function() {
    browser.waitForAngularEnabled(true);
    jasmine.getEnv().addReporter(reporter);
  },

  // Close the report after all tests finish
  afterLaunch: function(exitCode) {
    return new Promise(function(resolve){
      reporter.afterLaunch(resolve.bind(this, exitCode));
    });
  },

  onPrepare: function () {

    var jasmineReporters = require('jasmine-reporters');
    jasmine.getEnv().addReporter(new jasmineReporters.JUnitXmlReporter({
      consolidateAll: true,
      savePath: './',
      filePrefix: 'xmlresults'
    }));
    var fs = require('fs-extra');

    fs.emptyDir('screenshots/', function (err) {
            console.log(err);
        });

        jasmine.getEnv().addReporter({
            specDone: function(result) {
                if (result.status == 'failed') {
                    browser.getCapabilities().then(function (caps) {
                        var browserName = caps.get('browserName');

                        browser.takeScreenshot().then(function (png) {
                            var stream = fs.createWriteStream('screenshots/' + browserName + '-' + result.fullName+ '.png');
                            stream.write(new Buffer(png, 'base64'));
                            stream.end();
                        });
                    });
                }
            }
        });

    var AllureReporter = require('jasmine-allure-reporter');
    jasmine.getEnv().addReporter(new AllureReporter({
      resultsDir: 'allure-results'
    }));
  },

  //HTMLReport called once tests are finished
onComplete: function() {
  var browserName, browserVersion;
  var capsPromise = browser.getCapabilities();

  capsPromise.then(function (caps) {
     browserName = caps.get('browserName');
     browserVersion = caps.get('version');
     platform = caps.get('platform');

     var HTMLReport = require('protractor-html-reporter-2');

     testConfig = {
         reportTitle: 'Protractor Test Execution Report',
         outputPath: './',
         outputFilename: 'ProtractorTestReport',
         screenshotPath: './screenshots',
         testBrowser: browserName,
         browserVersion: browserVersion,
         modifiedSuiteName: false,
         screenshotsOnlyOnFailure: true,
         testPlatform: platform
     };
     new HTMLReport().from('xmlresults.xml', testConfig);
 });
}


};

This is my spec

 it('should click on checkmark', async function () {
        await element(by.css(".ng-star-inserted > .mat-button-wrapper > .mat-icon")).click(); ////click on the checkmark
        browser.sleep(2000);

        element(by.css('button.mat-primary > .mat-button-wrapper')).click(); /////////Click on confirm
        browser.sleep(2000);

////////Here I would like to see the confirmation message       

             element(by.css("h3")).getText().then(function(text){
                 console.log(text);
                 expect(text).toBe("Submission Success")
             })

Any help is really appreciate

Answer 1

In protractor you should use inbuild control flow or use await. You cannot use both.

Remove async from spec and remove all awaits or disable control flow and add await to all browser instance.

To disable controlflow add :

SELENIUM_PROMISE_MANAGER: false,

To config:

Config file:

exports.config = {
  directConnect: true,
  getPageTimeout : 12000000,


  // Capabilities to be passed to the webdriver instance.
  capabilities: {
    "browserName": 'chrome',       
},

SELENIUM_PROMISE_MANAGER: false,

    onPrepare: function(){
       browser.waitForAngularEnabled(false);
     },

   framework: 'jasmine',
  specs: ['../tests/ReturnToVendor.js'],    

  // Options to be passed to Jasmine.
  jasmineNodeOpts: {
    defaultTimeoutInterval: 150000
  },

And your spec:

 it('should click on checkmark', async function () {
            await element(by.css(".ng-star-inserted > .mat-button-wrapper > .mat-icon")).click(); ////click on the checkmark
            await browser.sleep(2000);

            await element(by.css('button.mat-primary > .mat-button-wrapper')).click(); /////////Click on confirm
            await browser.sleep(2000);

            ////////Here I would like to see the confirmation message       

            let text = await element(by.css("h3")).getText();

            console.log(text);
            expect(text).toBe("Submission Success")