Running the multiple scenarios in a single feature files fails in cypress - cucumber

Question

For Cypress cucumber project, I have 1 feature file login.feature which has 2 scenario outlines
Valid Login
Invalid Login
When I am running the login.feature file. The Valid login scenario has a checkpoint to verify I am on the homepage. Which it takes times to verify and within couple of seconds, it moves to the next scenarios causing the first scenario to failed.
If i run both of them one by one, Nothing is failing. Cypress uses their own feature to wait for the particular element to check and then move to next one. But here, it is waiting for sometime and gradually moving to the next scenario.
login.feature
Feature: Login to Application
As a valid user I want to log in to the Application
#login
Scenario Outline: Valid Login
Given user open the login Page
When user enter a username "<userName>"
And user enter a password "<password>"
And user click the sign-in button
Then user should be able to login
Examples:
| userName | password |
| abc | ########### |
#login
Scenario Outline: Invalid Login
Given user open the login Page
When user enter a username "<userName>"
And user enter a password "<password>"
And user click the sign-in button
Then error should displayed as "<error_message>"
Examples:
| userName | password | error_message |
| admin | sd444-fdf-ffr | Unable to sign in |
login_steps.js
import { Given, When, And, Then } from "cypress-cucumber-preprocessor/steps";
import loginPage from "../pageObjects/pages/login_page";
before(() => {
cy.log("I will only run before the first scenario of login.feature");
});
beforeEach(() => {
cy.log("I will run before each Scenario of login.feature");
});
Given("user will run before all the scenarios", () => {
cy.log("Scenario - Started");
});
Given("user open the login Page", () => {
loginPage.visitLoginPage();
});
When("user enter a username {string}", (username) => {
loginPage.fillUsername(username);
});
And("user enter a password {string}", (password) => {
loginPage.fillPassword(password);
});
And("user click the sign-in button", () => {
loginPage.submitLoginDetails();
});
Then("user should be able to login", () => {
loginPage.checkLoginSuccess();
});
Then("error should displayed as {string}", (error_message) => {
loginPage.checkErrorMessage(error_message);
});
login_page.js
class loginPage {
static visitLoginPage() {
cy.visit('/');
cy.url().should('include', 'login');
}
static fillUsername(username) {
cy.get('#abc').type(username);
}
static fillPassword(password) {
cy.get('#def').type(password);
}
static submitLoginDetails() {
cy.get('[type="submit"]').click();
}
static checkLoginSuccess() {
cy.get('#large-device').should('be.visible');
}
static checkErrorMessage(error_message) {
cy.get('#form1').should('contain.text', error_message);
}
static loginWithValidCredentials(username, password) {
cy.visit('/');
cy.url().should('include', 'login')
cy.get('#abc').type(username);
cy.get('#def').type(password);
cy.get('[type="submit"]').click();
}
}
export default loginPage
Let me know for any more information. I am new to cypress cucumber. Please help me out here.