Click in Protractor is too fast

Question

After clicking on a button, a dialog for confirming should be displayed at the bottom of the page. But Protractor clicks too fast on this button, that the next page is loaded without displays the dialog on the current page. This is the code:

    it('click on the arrow and click on yes', async function () {
        await element(by.css('button')).click(); //////click on the button that should displays the msg
        browser.sleep(1000);

////////// these elements are not displayed because the click is too fast 
        await element(by.css("p")).getText().then(function(text){
            console.log(text);
            expect(text).toBe("Would you like to preserve this return?");
        })
        await element(by.css('button:nth-of-type(2)')).click(); ///// click on yes

    });

I also tried this

it('click on the arrow and click on yes',  async function () {                
        element(by.css('button')).click().then( function (){
            WaitForLoad(element(by.css("p"))).getText().then(function (){
                expect(text).toBe("Would you like to preserve this return?")
            })
        })
        browser.sleep(2000);

        // await element(by.css("p")).getText().then(function(text){
        //     console.log(text);
        //     expect(text).toBe("Would you like to preserve this return?");
        // })
        await element(by.css('button:nth-of-type(2)')).click(); //click on yes       
    });

But then I got: Failed: WaitForLoad is not defined

Any suggestion is appreciated.

Answer 1

In protractor everything is promise:

so you have to use await with browser.sleep also, if you want it synchronously.

 it('click on the arrow and click on yes', async function () {
        await element(by.css('button')).click(); 
        await browser.sleep(1000);
        let text = await element(by.css("p")).getText()
        console.log(text);
        expect(text).toBe("Would you like to preserve this return?");
        await element(by.css('button:nth-of-type(2)')).click();

    });

Note: use SELENIUM_PROMISE_MANAGER: false, in your config file https://www.protractortest.org/#/async-await

If you don't want to use await :

    it('click on the arrow and click on yes', function () {

            element(by.css('button')).click().then(function (){
                WaitForLoad(element(by.css("p"))).getText().then(function (){
                    expect(text).toBe("Would you like to preserve this return?")
                })
            });

            browser.sleep(2000).then( function(){

            element(by.css("p")).getText().then(function(text){
                 console.log(text);
                 expect(text).toBe("Would you like to preserve this return?");
                 element(by.css('button:nth-of-type(2)')).click();
             })

        });

    }
  );