What steps can I take to prevent all of my Cucumber.js steps from running simultaneously?

I need assistance with writing a Cucumber.js test that can effectively test the search form on my website. Currently, I am facing an issue where the subsequent steps run before the results page fully loads after entering a search term using Selenium Webdriver.

How can I ensure that the following steps only execute after the results page has completely loaded?

Below is a snippet of my code:

const { When, Then, AfterAll, Given } = require('@cucumber/cucumber');
const assert = require('assert');
const { Builder, By, until, Key } = require('selenium-webdriver');

const driver = new Builder()
    .forBrowser('firefox')
    .build();

Given('I am on the search page',  async function () {
    driver.wait(until.elementLocated(By.tagName('h1')));
    await driver.get('https://www.awebsite.com/search');
});

When('I enter the term Honda', async function() {
    await driver.findElement(By.className('search-input')).sendKeys('Honda', Key.RETURN);
});


Then('the search should return results', async function() {
    let results = await driver.findElement(By.className("search-container_results"));
    let count = await driver.findElement(By.className("search-results_count")).getText();
    assert.equal(count, "5 results");
});

AfterAll(async function(){
    await driver.quit();
});

Answer №1

After some experimentation, I discovered that the most effective method to accomplish this task was by implementing Explicit Waits with elements.

In the scenario mentioned, I utilized until.elementTextContains() to verify if the text within an element had changed before proceeding with the test.

Considering that the element itself is always present, I also incorporated unit.stalenessOf().

As a result, I modified the Then() step to:

Then('the search should return results', async function() {
    await driver.wait(until.stalenessOf(driver.findElement(By.className("search-container_results"))));
    await driver.wait(until.elementTextContains(driver.findElement(By.className("search-container_results")), 'Honda'));
    let count = await driver.findElement(By.className("search-results_count")).getText();
    assert.equal(count, "5 results");
});

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

Tips on utilizing Jquery to extract an array containing UL, LI, and input elements

I am currently working with five ul lists, each of which may contain an input element. For example: <form id="testForm"> <ul id="1"> <li>TEST</li> <li>Gender: <select id="gender" name="gender"> ...

How do you modify the color of the highlighted text using JavaScript?

I am currently using the Chrome browser. My background is blue and the text color is white. Issue: When I try to copy and paste the text into Word, it becomes invisible due to its color. Is there a JavaScript solution to change the text color when selec ...

"Encountering a Javascript issue while trying to apply a CSS class to a

Encountering issues in Safari desktop / mobile and Internet Explorer. The error message states: In Safari: TypeError: Attempted to assign to readonly property. IE Edge: Assignment to read-only properties is not allowed in strict mode The problem arises ...

Error encountered: Unable to access undefined properties while attempting to make an API call to AirTable using NextJS version 13.4

Currently in the process of learning how to use the App router with NextJS 13.4, I encountered an issue while attempting to make an external API call. Even though I am getting all the data correctly from Airtable, Next throws an error that disrupts my try ...

Press the button with Selenium framework using Java

Having trouble selecting the correct 'Give' button under the club sports tab on this page . There are multiple 'Give' buttons on the page, but I need to choose just one. Additionally, when clicked, a new window pops up and I'm not ...

Using a UUID as the default ID in a Postgres database system is a straightforward process

As I transition to postgres from mongodb due to the recent announcement, I've noticed that the IDs are simply numerical and auto-incremented. I've attempted a few solutions: Setting the default ID to a UUID with a lifecycle hook - Unfortunately, ...

I am encountering issues with my THREE.js RawShaderMaterial

I haven't encountered any issues when loading shaders created by others into THREE.js, but I've hit a roadblock when trying to create and run my own shader. The shader works perfectly on the platform where I designed it (), but it doesn't fu ...

Displaying a notification in React when the array of objects is empty

I need to create a notification based on whether my object contains any data or not. Initially, I store the data in a state called "data" and set it to null. When I receive data from the server, I update the data state with the returned data. If the data ...

Is there a way to change iframe using selenium vba?

When attempting to write a VBA script using Selenium to switch iframes, an error stating "object doesn't support this property" occurs. How can I resolve this issue based on the example provided below? Sub HCAD() Dim driver As New ChromeDriver ...

Reorganizing Elements within an Array using JavaScript

Imagine I have the characters: H, M, L I want to create sorted arrays like this: var array1 = [ "H", "M", "L", "L", "M", "H" ]; My goal is to avoid having more than one unique character in the first three and last three characters when using the shuffl ...

What is the best way to allocate a unique color to every item within an array?

I've been working on some JavaScript code that pulls a random color from a selection: const colors = [blue[800], green[500], orange[500], purple[800], red[800]]; const color = colors[Math.floor(Math.random() * colors.length)]; Within my JSX code, I ...

Changing the color of specific sprites in three.js

I'm currently exploring three.js and encountering some difficulties when attempting to adjust the color of individual sprites in an array. My reference point is the example provided on this link from threejs.org. The specific task I am working on in ...

The Python Selenium test passes without issue when executed on its own, but encounters a Chromedriver error when included in the defaultTestLoader

While conducting a Selenium Test in Python, I encountered an issue. The test file runs successfully, but when attempting to run a testLoader with that test, an error occurs: selenium.common.exceptions.SessionNotCreatedException: Message: session not create ...

The Material-ui Select component is experiencing issues with updating the state accurately

When creating a multiple select input using Material-UI, I encountered an issue with setting the default selected values from state. Despite having an array of two objects in the state and setting it as the select value, the default objects are not being ...

When a button is clicked, unleash the magic of music using JavaScript

Why isn't the button onclick working for the mp3 file I uploaded to GitHub? I even tried using the link through https://voca.ro/1dcHxW3v1oQA, but it still wouldn't work. function play() { var audio = new ...

Ways to determine the length of a string that includes zero or negative width characters such as u0007 or 

Consider the following scenario: I have a string 'aa\b\u0007\u0007' var myString = 'aa\b\u0007\u0007'; console.log(myString); //=> 'a' (plus 2 beeps) console.log(myString.length); //=> 5 ...

What is the best approach to accessing a key within a deeply nested array in JavaScript that recursion cannot reach?

After hours of research, I have come across a perplexing issue that seems to have a simple solution. However, despite searching through various forums for help, I have reached an impasse. During my visit to an online React website, I stumbled upon the web ...

Loop within a promise results in undefined

Within my application, there is a function that returns a promise. Inside this function, I wait for an image in the DOM to become available and then extract that element to generate base64 data from it. getCodesOfOneMerchant(merchantDataEntry: MerchantData ...

Activate Gulp watcher to execute functions for individual files

I have developed a specific function that I need to execute only on the file that has been changed with gulp 4.0 watcher. For example, the current task setup looks like this: gulp.watch([ paths.sourceFolder + "/**/*.js", paths.sourceFolder + "/**/ ...

Navigate to a particular section, initially gliding smoothly before suddenly lurching downwards on the screen

I am currently working on improving the functionality of my fixed navigation bar at the top of the screen. When a link in the nav bar is clicked, it scrolls to a specific section using this code: $('a[href^="#"]').bind('click.smoothscrol ...