Behat automates the process of populating form fields that are dynamically displayed as 'visible'

I'm facing an issue with a form that has hidden fields. When a user selects a checkbox, some of the hidden form fields are supposed to be revealed using the jQuery function slideToggle(). The code itself is pretty simple and you can see an example here.

The problem arises when Behat still treats the form fields as invisible and non-interactable even after they have been revealed by the checkbox for the user.

Here's the scenario I’m trying to test in my feature:

When I check "form_checkbox" 
And I fill in "form_field" with "some data"

My question is how can I ensure that the click listener for the checkbox has completed its execution before attempting to interact with the form? Is there a better approach to handling this situation?

javascriptsymfonyseleniumbehat

Answer №1

For a smooth animation experience, consider inserting an AfterStep step in between the two actions to allow jQuery to handle the animation. You can implement this in your FeatureContext as shown below:

 /**
 * @AfterStep @javascript
 */
public function afterStep($event)
{
    $text = $event->getStep()->getText();
    if (preg_match('/(follow|press|click|submit|check)/i', $text)) {
        $this->jqueryWait();
    }
}

protected function jqueryWait($duration = 4000)
{
        $this->getSession()->wait($duration, '(0 === jQuery.active && 0 === jQuery(':animated').length)');
}

This setup ensures that after any step containing words like "follow", "press", "click", "submit", or "check", the program will pause for either the specified $duration milliseconds or until there are no ongoing jQuery animations.

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

ChartJS v2: Displaying scale value based on click coordinates for time scale

I am having an issue with a time-based line chart where I am trying to retrieve the values for each scale at the click coordinates. In my ChartJS options, I have defined an onClick function: onClick: function(event, elementsAtEvent) { console.log(eve ...

javascriptchart.js

activate a CSS-only modal with JavaScript

Is it possible to trigger a pure CSS modal using JavaScript (jQuery) without the need for a label, so that it activates when a user visits a page? http://jsfiddle.net/h84nubzt/ <label class="btn" for="modal-one">Example</a> <!-- Modal ...

javascriptjquery

reconfigure form credentials with JavaScript

I am currently working on a form that includes a textbox and a button for submitting data using ajax. <input type="password" id="password" /> <button id="addaccount" onclick="showload();">Add</button> When the user clicks on the button, ...

javascriptjqueryhtmlcss

Waiting for multiple asynchronous calls in Node.js is a common challenge that many developers

I'm facing a dilemma trying to execute multiple MongoDB queries before rendering a Jade template. I am struggling to find a way to ensure that all the Mongo Queries are completed before proceeding with rendering the template. exports.init = funct ...

javascriptnode.jsmongodb

Leverage Angular's constant feature in scenarios that extend beyond the

Even though it may not be recommended, I find it fascinating to use Angular services outside of the angular framework. One example is having .constant('APIprefix','/api') I am curious about how to access the value of APIprefix outside ...

javascriptangularjs

Which property is best suited for styling a phone number field in the MUI data grid in ReactJS?

I previously utilized the pattern attribute for input fields in pure HTML, but now I no longer have any input fields. What should be my next steps? Can you provide me with a reference in the MUI documentation? https://i.stack.imgur.com/ ...

javascriptmaterial-uiformatmui-datatable

Would you be able to assist me in automating the clicking of the Postcode Checker Search button using selenium

Struggling with my Selenium tutorial in Python as I can't get the postcode search button to click. Using: Python v3.9 Chrome v87 The URL for practice is: This is the code snippet I'm currently working with: # Selenium Tutorial #1 from selen ...

pythonpython-3.xseleniumselenium-webdriverselenium-chromedriver

How can you retrieve attributes from a specific element within a dropdown menu?

I came across this intriguing HTML code snippet: <select id="selectSomething"> <option id="4" data-name="tomato" data-email="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfbba0a2aebba08fbbe1aca0a2">[email ...

javascriptjqueryhtmlselect

Receiving an error message stating "Uncaught SyntaxError: Unexpected token <" in React while utilizing the AWS SDK

Each time I execute 'npm run build' in main.js, an error keeps popping up: Uncaught SyntaxError: Unexpected token < The error vanishes after refreshing the page. Upon investigation, I discovered that two libraries are causing this problem: ...

javascriptreactjsaws-sdkaws-sdk-js

Having trouble getting the expected transition effects to work with Vue.js

Currently, I have a display of lists of items through the use of v-for. Initially, only the summary section of each item is visible. Upon clicking on an item, the details section is supposed to appear. This functionality is achieved by adding or removing ...

javascriptvue.jsvuejs2vue-componenttransition

How is it possible for a JavaScript variable sharing the same name as a div Id to automatically pass the div?

This is just ridiculous. Provided HTML <p id = "sampleText"></p> Javascript var sampleText = "Hello World!"; Execution console.log(sampleText); // prints <p id = "sampleText"></p> How is this even possible? I ...

javascripthtmlcss

Having trouble transferring files to an unfamiliar directory using Node.js?

const { resolve } = require("path"); const prompt = require('prompt'); const fsPath = require('fs-path'); // Retrieve files from Directory const getFiles = dir => { const stack = [resolve(dir)]; const files = []; whi ...

javascriptnode.jsnpmfilesystems

Unable to make changes to a file authored by a different user within Firestore using Vue.js / Firestore

I appreciate any assistance in advance, as this issue has been causing me a lot of frustration! Currently, I am adhering to the firestore data model where users are able to create their own documents associated with their userID. This ensures that users c ...

javascriptfirebasevue.jsgoogle-cloud-firestore

What is the best way to send a populated custom class from JavaScript to a .NET MVC app using AJAX?

I am working with a .NET class in C# called BusinessModel: public class BusinessModel { public string BlobName { get; set; } public string NewName { get; set; } } In my MVC Ajax Controller, I have an action called DoBusiness: [HttpPost] public A ...

javascriptc#jsonajaxasp.net-mvc

Unable to find the Selenium Element with partial text link

I just started learning Selenium and I am encountering an issue while trying to click a link on the second page after the login page. The login functionality is working fine, but when the browser navigates to the next page, it throws an exception: Here is ...

pythonseleniumnosuchelementexceptionpartiallinktext

What is the method to switch between radio buttons on a webpage?

Here is an example of HTML code: <input type="radio" name="rad" id="Radio0" checked="checked" /> <input type="radio" name="rad" id="Radio1" /> <input type="radio" name="rad" id="Radio2" /> <input type="radio" name="rad" id="Radio4" /& ...

javascriptjqueryhtml

Why does the Next.js GET index request keep fetching multiple times instead of just once?

Currently, I am encountering an issue while working on a tutorial app with Next.js. One of my components is not rendering due to what seems like multiple executions of a simple GET request for an index page. The problem perplexes me, and I need some assist ...

javascriptreactjsmongodbnext.js

A guide on utilizing Material UI Fade for smoothly fading in a component when a text field is selected

I am facing an issue with a text field input and a helper component. My goal is to have the helper component fade in when a user focuses on the input field. The helper component is wrapped as follows: <Fade in={checked}> <DynamicHelperText lev ...

javascriptreactjstypescript

Regular Expression to Replace Characters Not Matching

I am struggling with a coding issue that involves manipulating a string. The original string I have is "Hello This is world This". Here is the code snippet I have tried: var patt = 'Hello This is world This' var res = patt.constructor; alert( ...

javascriptregex

Having trouble extracting text from elements within a shadow-root with Python Selenium

I am facing difficulties extracting text from a shadow-root element. I have reviewed multiple documents and the code seems correct to me, but I keep encountering this error: Traceback (most recent call last): File "C:\python\vttest.py", line 29, ...

pythonseleniumselenium-webdriver