Issues encountered while working with dynamic content in fluentlenium

While conducting tests using fluentlenium on my application, I encountered some errors. I am utilizing Play Framework and Slickgrid to generate my grid. Slickgrid dynamically creates the grid in javascript. The structure of the grid that is generated looks like this:

<div id=”grid”>
<div class=”header”>
    <div class=”slickgrid-column-header column-1”>Column 1 </div>
    <div class=”slickgrid-column-header column-2”>Column 2 </div>
    <div class=”slickgrid-column-header column-2”>Column 2 </div>
</div>
<div class=”viewport”>
    <div class=”canvas”>
        <div class=”slick-row row-1”>
            <div class=”slick-cell l0 r0> Column 1 Row 1</div>
            <div class=”slick-cell l1 r1> Column 2 Row 1</div>
            <div class=”slick-cell l2 r2> Column 3 Row 1</div>
        </div>
        <div class=”slick-row row-2”>
            <div class=”slick-cell l0 r0> Column 1 Row 2</div>
            <div class=”slick-cell l1 r1> Column 2 Row 2</div>
            <div class=”slick-cell l2 r2> Column 3 Row 2</div>
        </div>
    </div>
</div>
</div>

Usually, when you check your source code with fluentlenium, all code should be visible, but in my case, certain slickgrid lines are missing, crucial ones that I need. This snippet shows a basic test that retrieves the page source.

@Test
   public final void fakeTest() {
         final int port = 3333;
     running(testServer(port, fakeApplication()), HTMLUNIT, 
         new Callback<TestBrowser>() {
          @Override
         public void invoke(final TestBrowser browser) throws Throwable {
                browser.goTo("http://localhost:3333/fake");
                    System.out.println(browser.pageSource());
         }
          });
   }

The output appears as follows:

<html>
<head> <title> </title> </head>
<body>
    <div id=”grid>
        <div class=”header”>
            <div class=”slickgrid-column-header column-1”>Column 1 </div>
            <div class=”slickgrid-column-header column-2”>Column 2 </div>
            <div class=”slickgrid-column-header column-2”>Column 2 </div>
            </div>
                <div class=”viewport”>
            <div class=”canvas”></div>
            </div>
    </div>
</body>
</html>

As you can see, the cells did not display, making it impossible for me to access the FluentWebElement representing them for simulated clicks or retrieving cell values.

Answer №1

Your behavior is as follows:

  • Visit the page
  • Immediately print the page source

However, what may be happening is that the Slickgrid content has not been generated yet. Patience is required.

To address this issue, consider using the await API in between the goTo(page) method like so:

await().atMost(5, TimeUnit.SECONDS).until(".slick-row").isPresent()

Alternatively, you can choose a different approach that suits your needs better. This code snippet will wait for a maximum of 5 seconds until an element with the class slick-row is located.

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

Can we bring flexbox inserts, removes, and item positioning to life through animation?

This question was first raised in 2012, but the responses provided didn't address my specific situation (smooth transition for rearranging wrapped content). "After removing an item from a flexbox, the remaining items snap into their new positions imm ...

Is the focus styling malfunctioning within a React component?

Issue: I'm facing a challenge with my custom search box in a React application. Despite my styling efforts, I can't seem to get the desired outline effect when someone types in the textbox. <div className="search-box"> <Row> & ...

What is the best way to transfer text from a textbox to the clipboard with the help of jquery, javascript

Looking to add a copy to clipboard button on your website but want to avoid using Flash? Search for methods that don't require the outdated technology. Is there a way to achieve this without relying on Flash? ...

What is the reason behind the necessity of adding an extra slash when reloading the page and controller in AngularJS by using $location.path()?

In AngularJS, when you use $location.path() and pass the same URL as the current one, it does not reload the page and controller. However, if you add an extra slash at the end of the URL like this: $location.path('/currentURL/'); it forces a re ...

Converting Roman Numerals into Decimal Numbers using JavaScript Algorithm

I am eager to develop a Javascript Algorithm that can convert Roman numerals to Arabic using the provided methods below. Array.prototype.splice() Array.prototype.indexOf() Array.prototype.join() I have managed to find an algorithm that accomplishes this ...

What is the origin of the trailing commas seen in these radio button choices?

After closely examining my radio buttons, I noticed a strange issue - there is an unexpected trailing comma after each option. Strangely, I did not add these commas in the template and I cannot figure out where they are coming from. Initially, I suspected ...

What could be causing the issue with dayjs dynamic importing in TypeScript?

Currently, I am developing a web screen within a .NET application and facing an issue with sending datetime preferences from the system to the web screen using CefSharp settings. AcceptLanguageList = CultureInfo.CurrentUICulture.Name In my TypeScript code ...

What could be causing the input field state to remain static even as I type in the MUI textField?

In my React.js component, I am facing an issue where the textField is not updating when I try to type anything. Upon debugging, I discovered that when the first character is entered, the component re-renders and loses its previous state, causing the textF ...

The problem arises when the Chrome extension fails to trigger the XRM JavaScript code execution

Utilizing the XRM JS APIs within Dynamics CRM is my goal as I develop a Chrome extension. The code snippet below demonstrates my current approach. chrome.tabs.query({ currentWindow: true, active: true }, function(tabs) { chrome.scripting.executeScript({ ...

How come my product details page keeps automatically scrolling to the bottom every time I visit it?

I am facing an issue where clicking on a card to navigate to the product details page automatically takes me to the bottom of the next page without scrolling. Below is a snippet of my code: import React from "react"; import { Link } from "re ...

How to retrieve email input using SweetAlert2 in PHP?

Hello there! I'm curious about the most effective method for integrating PHP with Javascript. My goal is to execute some coding tasks once an email address has been entered. swal({ type: "success", title: "Congrats!", text: "Please enter your P ...

Transferring information to a controller using ajax in ASP.NET Core

I am encountering an issue with sending data to the controller through ajax. The value goes as "null". Can someone please assist me with this? Here are my HTML codes: <div class="modal fade" id="sagTikMenuKategoriGuncelleModal" data ...

MongoDb Mongoose's aggregatePagination feature occasionally displays duplicated documents across various pages

Currently, I am encountering an issue related to pagination in mongodb and mongoose. My goal is to search through a group of Tutors based on certain criteria and have the results paginated and sorted by their updated date. However, the problem arises when ...

Seamless diagonal scrolling across different browsers using jQuery

By adjusting the position of a <div> named container horizontally based on vertical scrolling, I achieve a unique effect: scrollElement.scroll(function() { var offsetLeft = scrollElement.scrollTop() / x; container.css({ left: offsetLeft + & ...

Ways to Manage modals responses as services in AngularJS

I am a beginner in the world of JavaScript and AngularJS. I am fascinated by some of the concepts within JS, like trying to create a modal service using the example I found online. I am eager to delve deeper into what exactly is happening under the hood, e ...

Unspecified locale with Next.js router

Despite extensive research and multiple attempts, I have not been able to find a solution to my problem. That's why I am reaching out for help again. Currently, I am working on a local project and I would like to implement Internationalized Routing f ...

Place the bottom element of the top parent element in position

Creating a simple tooltip with bottom positioning at the top of the parent element involves setting a negative height for the tooltip element. However, when checking the height of the tooltip element upon hovering, it returns 0 according to console.log(). ...

Using jasmine-node to create a spy on a constructor invoked within another function

As a beginner in Jasmine, I am looking to write unit tests for a node.js application using this framework. However, I am facing some challenges, one of which is described below: var sampleFunction = function(){ var loader = new Loader(params); // ...

Updating the iframe source without reloading the main page

Within my ASP.NET website, I have a page that contains an iframe inside an Ajax Update Panel. I am able to change the src attribute of the iframe using JavaScript, but the issue is that when the src attribute is modified, it causes the parent page to refr ...

Troubleshooting Fontawesome Icons in React using TypeScript and state values

I am facing an issue while trying to dynamically change the type of an icon using state update. The error message I received is: Type 'string' is not assignable to type 'IconPrefix'. Below is a snippet of my code: import { useState } ...