Serenity-JS, step function timed out

Question

I'm in my first steps with Serenity and I've been stuck for 2 days with this problem.

I've got:

• navigate to the login page
• write the username
• write the password
• click the login button

and then, in the Step where the web change from login page to welcome page I want to validate if one of the buttons of the welcome page is present.

In the transition from login page to welcome appears a Loading Splash and then after a few seconds appears the Welcome page.

This is my scenario
Given that Sarah navigates to the access page
When she enters email as [email protected]
And she enters password as zzzzzz
And she clicks the button Login
Then she should navigates to the Empresa JMM Enterprise welcome page

I got the error in the last step (Then).

This is my code for the step where clicks the button Login:

this.When(/^prueba pulsar boton (.*?)$/, function (buttonText: string) {
    return this.stage.theActorInTheSpotlight().attemptsTo(
        ClickIniciarSesion.click(buttonText)
    )       
});

And this is the code where I validate if the button is present

this.Then(/^s?he should navigates to (.*?) Enterprise welcome page$/, function (enterpriseName: string) {
return this.stage.theActorInTheSpotlight().attemptsTo(
See.if(WebElement.of(Header.WelcomeButton), el => expect(el).to.eventually.be.displayed)
)

I see the execution and seconds before of the timeout I see the welcome page loaded and the button. I don't know why the error is timeout and not that the driver can't find the element.

Answer 1

I think that I have the solution. In the transition from the login page to the welcome page appears one page of loading. I think that serenity is "looking" in this loading page.

The test passed OK disabling the Angular synchronisation, doing the wait manually and enabling the synchronisation.

this.Then(/^s?he waits the enterpise data load$/, function () {       
    return this.stage.theActorInTheSpotlight().attemptsTo(
        UseAngular.disableSynchronisation()
    );
});    

this.Then(/^s?he should navigates to the (.*?) Enterprise welcome page$/, function (enterpriseName: string) {       
    return this.stage.theActorInTheSpotlight().attemptsTo(
        Wait.until(Header.EnterpriseName, Is.visible()),
        See.if(Header.EnterpriseName_Text, el => expect(el).to.eventually.be.equal(enterpriseName)),
        UseAngular.enableSynchronisation()
    )        
});   

I don't know if is the better solution.