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

Transitioning from using a jQuery get request to utilizing Vue.js

Looking to transition from JQuery-based js to Vue as a newcomer to JavaScript. Seeking guidance on making a get request and displaying the retrieved data. What approach would you recommend for this task? Here's the HTML snippet: <div> <di ...

javascriptjqueryvue.js

How can you store JavaScript objects to files, including their methods, in a Node.js environment?

In reading about saving objects to files in Node.js here on Stack Overflow, I understand the process. However, I am curious if there is a method that allows for writing an object in a manner that would enable me to reload the object into memory along wit ...

javascriptnode.js

Vue JS nested component does not appear in the document object model

I developed two separate VueJS components - one displaying a modal and the other featuring HTML input fields. When I attempt to nest these two components, the inner component fails to appear in the DOM. What could be causing this issue? Here's a snip ...

javascripthtmlvue.jsvue-component

Is it possible for a UnreachableBrowserException exception to be triggered by conflicting network configurations?

My setup involves two grids: I have a local grid setup where the hub and nodes run on my local machine, connected to network#1 Additionally, I have a VM grid setup where the hub and nodes are running in a virtual machine, connected to network#2 When ...

seleniumselenium-webdriverselenium-grid

Eliminate HTML tags and formatting, but retain the anchor tags within the string

I have a string variable with HTML content that I need to clean up by removing all tags and formatting, while still preserving anchor tags for clickable links. content = "<div><a href=\"1\">I</a> was going here and then <a h ...

javascripthtmlangularjs

Implementing universal styles to injected HTML (v-html)

I am facing an issue while injecting HTML content from my database using Vue. The problem is that although I can successfully inject the HTML, the framework stylesheet (Vuetify) does not seem to be applied to the injected content. The rest of the page ha ...

javascripthtmlvue.jsvuetify.js

Efficient ways to clear all input fields within a React div component

import "./App.css"; import { useState } from "react"; import { useSelector, useDispatch } from "react-redux"; import { addUser} from "./features/Users"; function App() { const dispatch = useDispatch(); const use ...

javascriptreactjsredux

By-passing Mistakes in Iteration in JavaScript

I have been working on using Google's Feed API to fetch images from a feed within an AngularJS controller. It successfully retrieves three images, but encounters an issue when it reaches a Twitter URL, causing the script to break. I would like it to s ...

javascriptjqueryangularjsloopsrss

"Embedding a Highcharts web chart within a pop-up modal window

I am looking to incorporate a Highcharts web chart onto a specific part of a Bootstrap modal, while ensuring the size remains dynamic along with the modal itself. Here's what I have attempted so far: Sample HTML code: <td><a href="#">${ ...

javascriptjquerycsstwitter-bootstraphighcharts

Tips for setting unique click functions for each face of a cube using React Three Fiber

Hey there! I have created a basic Cube component using react three fibre. import {useState,useRef} from 'react'; import { useFrame } from '@react-three/fiber'; const Box = ({props}) =>{ const ref = useRef() const [hove ...

javascriptreactjsthree.js3dreact-three-fiber

Checking that an object's keys are all present in an array in TypeScript should be a top priority

I am working with a const object that is used to simulate enums. My goal is to extract the keys from this object and store them in an array. I want TypeScript to generate an error if any of these keys are missing from the array. // Enum definition. export ...

javascriptarraystypescriptenums

Display the URL with proper formatting in the print function

I am trying to create a table with clickable URLs in a "Link" column, but the URLs are too long and I want to show a custom title instead. So far, I have used the following code: str = "Test Title"; link = str.link("https://my_long_url.com/v1.0/ui/index. ...

javascriptapache-zeppelin

How to efficiently monitor and calculate changes in an array of objects using Vue?

I have a collection named people that holds data in the form of objects: Previous Data [ {id: 0, name: 'Bob', age: 27}, {id: 1, name: 'Frank', age: 32}, {id: 2, name: 'Joe', age: 38} ] This data can be modified: New ...

javascriptvue.jsvuejs2

Encountering an error when using setState with React.createElement: invalid type provided

https://i.sstatic.net/YHssU.png Anticipated Outcome Upon clicking the login button without inputting an email or password, the user is expected to view the Notification component. Actual Outcome Upon clicking the login button, the setState function is ...

javascriptreactjssetstate

Error encountered in onclick handler due to unterminated string literal in PHP and jQuery

Trying to utilize PHP to send variables into the onclick of an element is resulting in an "Unterminated string literal" error due to long strings. Below is a snippet of my PHP code: $query = $conn->prepare("SELECT Name, Image, Description, Link, Price, ...

javascriptphpjqueryhtml

Execute a Jquery function on every field

I need to capitalize each value of the select options that come from a SQL database. However, the code provided only works on the first field... function capitalize(str){ var text = str.text().replace(/^(.)|\s(.)/g, function($1){ return $1.toUpperCas ...

javascriptjquery

Is there a way to sort data by year and month in mongodb?

I'm trying to filter data by year in MongoDB based on a specific year and month. For example, if I pass in the year 2022, I only want to see data from that year. However, when I try using the $gte and $lte tags, it returns empty results. Can someone g ...

javascriptnode.jsmongodbmongoosemongodb-query

Save a complete webpage with all HTML assets directly without pesky save as pop up using Python and Selenium

I'm in the process of scraping a website and saving all the webpages as .html files (along with all HTML assets) to be able to open them locally just like they appear on the server. At the moment, I am using Selenium, Chrome Webdriver, and Python. M ...

pythonseleniumweb-scrapingpyautoguichrome-web-driver

Is there a way to navigate my mouse across a webpage using Selenium (or a different webdriver) using specific x and y coordinates?

while True: cursorx, cursory = pyautogui.position() body = driver.find_element_by_css_selector("body") actions.move_to_element_with_offset(body, cursorx, cursory) Is it possible to programmatically move the mouse on a website without ...

pythonseleniumselenium-chromedriverpyautogui

Assigning a unique identifier to a button that will vary depending on the selected radio input

UPDATED HTML: The circumstances have changed because I am no longer in my office, but the concept remains unchanged. The situation is that on a certain part of a website, users have the option to choose from multiple saved addresses. Each address has a un ...

javascriptjqueryhtmlformsdynamic