Struggling with choosing elements in a modal window using Selenium WebDriver and Java

I have tried everything - SwitchWindow, Frame, Alert, and conducted extensive searches. Unfortunately, nothing has worked so far.

Whenever I click on an "edit" button, a new window pops up with a text box, special character selection, save and exit buttons. All I want to do is enter text in the box, but for some reason, Webdriver cannot find the element.

Here's some HTML. The textarea name="specHeading" is what I'm trying to edit.

<script src="/js/componentlist.js" type="text/javascript">
<script src="/js/mrinformation.js" type="text/javascript">
<script src="/js/jquery.resources.js" type="text/javascript">
<script src="/js/validateresources.js" type="text/javascript">

<div class="ckmodal-next" style="top: 9px; left: 1281.5px;"></div>
<div class="ckmodal-prev" style="top: 9px; left: 261.5px;"></div>
<div class="ckmodal-close" style="top: -225px; left: 1239px;"></div>
<div class="ckmodal-background" style="width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background-color: rgb(51, 51, 51); opacity: 0.8; z-index: 10000000;"></div>
<div class="modal-container" style="opacity: 1; position: fixed; top: -212.5px; left: 321.5px; display: block; z-index: 10000001;">
    <form class="form">
       <div class="row">
          <div class="col24">
             <div class="box box-gray">
                <h2>
                   <div class="content">
                      <fieldset class="full">
                         <div class="form-field full">
                            <label>Heading:</label>
                            <textarea name="specHeading"></textarea>
                         </div>
                         <div class="form-field full">
                            <div class="form-field bottom full">
                      </fieldset>
                      <div class="clear"></div>
                   </div>
                </div>
             </div>
          </div>
       </form>
    </div>
 </body>
</html>

It appears that there are no windows to switch to, and it's neither an iframe nor an alert. Here is what I believe is the JavaScript from the modal.

<script src="/js/productheaders.js" type="text/javascript">
    ;(function($){
        var $currentEditHeader = null;

        function setupForm(e) {
            var $this = $(this),
            value = $this.siblings('span').html();

            $currentEditHeader = $this.parents('.product-header');
            $('#edit-header').ckmodal({
                onShow: function(){
                    $('textarea[name=specHeading]').val(value.replace(/<br\s*[\/]?>/g, '\n')).focus();
            }
        });
    }

function saveHeader(e) {
    var $this = $(this),
    value = $('textarea[name=specHeading]').last().val();

    if ( value == '' ) {
        var defaultValue = $currentEditHeader.attr('data-default-value');
        $currentEditHeader.children('span').text(defaultValue);
        $currentEditHeader.addClass('default');
    } else {
        $currentEditHeader.children('span').html(value.replace(/<[^>]*>?/g, '').replace(/\n/g, '<br>'));
        $currentEditHeader.removeClass('default');
    }

Answer №1

A unique approach to handling the "popup" is to integrate it seamlessly into your main page rather than as a separate element. You can easily make it visible within the existing structure of your website. It's important to note that there may be a delay in visibility if the popup includes any animations.

When encountering difficulties with entering text into fields, consider using the following steps:

  1. Begin by clearing the textFieldElement
  2. Next, utilize textFieldElement.sendKeys() to input text

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

The resizing of an array cannot occur without implementing the copyOf() method

I have a method to increase the size of an array by double once it reaches full capacity. I've been exploring ways to resize it without using Arrays.copyOf, opting instead to create a new array that is twice the size and transferring the original dat ...

Using either CSS or JavaScript to prevent text selection highlighting when pressing CTRL + A

Note: Please note that this question is distinct from How to disable text selection highlighting using CSS? Prior to asking, I reviewed the discussion history of the aforementioned question. Everything seems to be working well, except that I want to allow ...

Exploring dynamic perspectives in couchbase through the implementation of map reduce techniques

Currently, I am utilizing the following map reduce function: public static final String UNIQUE_ASSET_COUNT_VIEW = "function (doc, meta) { \n" + " if(doc.type == \"nikhil\") { \n" + "emit(); I am interested in making this dynami ...

Is it possible to send an ajax request within another ajax request?

I'm facing an issue with a php file that is sending an ajax request to another file located on a different domain name. The receiving parser then processes the information and sends it via ajax to yet another php file where the final action is carried ...

Tips on locating distinctive identifiers for elements on pages within ExtJS when working with Selenium?

Utilizing Selenium along with Firefox Webdriver to interact with elements on a webpage that features distinct CSS IDs, which change every time the page loads, is proving to be challenging. The reason for this inconsistency is due to the fact that the webpa ...

Is there a way to combine two objects within an array and calculate the sum of their elements?

Can anyone suggest a method to merge objects and calculate the total number of their elements simultaneously? I'm struggling to find a way to combine them while also adding up the chats count. Here is an example array: [ [ { id: ' ...

Locating the following Element with Python Selenium once a specific Element has been located

I am currently facing challenges with locating the appropriate element using Selenium. The structure of the HTML code is as follows: <div> <div> <div> <table> <thead> ...

Converting OpenCV code to JavaCV code - a step-by-step guide

i am struggling with converting the code below to javacv: ((int*)(srcArg->imageData + srcArg->widthStep*P2.y))[P2.x] what is the translation of this? It appears to be an array, but the data type of value is float. i am unsure how to assign a value ...

Please note: With React 18, the use of ReactDOM.render is no longer supported. Instead, we recommend using create

I encountered an issue while attempting to link my React application with a MongoDB database. Here is the code snippet where the problem occurred: //index.js ReactDOM.render( <React.StrictMode> <BrowserRouter> <App /> &l ...

Using AngularJS to dynamically modify filter choices

Seeking something similar to this example in the documentation, but with a unique input that can serve as a filter for "any", "name", or "phone" properties. The role switching is triggered by clicking an anchor tag. Check out the code snippet here: http:// ...

Populate my empty arrays with information retrieved from Firebase

I am currently working on creating a "single client" view for my application. Each client has a first name (prenom) and a last name (nom). However, even though my application recognizes that these values exist for each client, they do not appear on the scr ...

TSLint is encountering the error code TS2459: The module "@azure/core-tracing" claims to have a local declaration of "Span" but does not export it, along with additional errors

I'm completely lost on how to tackle this error. The message I'm getting doesn't provide much insight, other than indicating an issue with the installation of '@azure/ai-text-analytics'. I've gone through the process of uninst ...

The submit button in Angularjs does not respond to the Enter key press

Click below to submit: <input type="submit" ng-click="Showdata()" class="btn blue pull-right" Text="" /> Email input field: <input type="text" ng-model="texttype" class="form-control" ng-class="eml" placeholder="Enter Email" /> Password ...

Employ Selenium WebDriver to choose a radio button by its text label

The outdated radio button implementation on a legacy page is causing some trouble. Here's the current setup: <input id="button1" name="button" value="32" onchange="assignProduct(this.value);" type="radio"></input> RADIO TEXT 1 <input i ...

Eliminate the flickering effect on the dropdown menu

Is there a way to eliminate the annoying 'flicker' effect on my menu? Whenever I click on 'Dropdown 1', I notice that Test 1 and Test 2 flicker. My assumption is that this is due to my use of the !important declaration. Any suggestion ...

Handling the http.get response in a Java Spring method

I am faced with managing the HTTP GET response from a Java Spring GET request. The file downloaded from the server is in zip format, containing a .pdf and .png file. Below is the Java code snippet: @RequestMapping(value="/data/{meetingId}", method = Reque ...

Using API for Pagination

Hello everyone! I seem to have run into a pagination issue and was hoping someone could help me out. I made an API call using Axios to retrieve a list of movies, with 20 results per page for pagination. However, I'm facing a problem where there is a d ...

Steering clear of Unfulfilled Promises in TypeScript. The Discrepancy between Void and .catch:

When it comes to handling promises in TypeScript, I'm used to the then/catch style like this: .findById(id) .then((result: something | undefined) => result ?? dosomething(result)) .catch((error: any) => console.log(error)) However, I have also ...

Ways to navigate through textarea components within an iframe tag

I am presented with the following HTML structure: <iframe id="screenshare" ref="screenshare" class="fullScreen2"></iframe> To dynamically fill the <iframe> element, I am utilizing JavaScript through the below function: func ...

Utilizing the JSON result of an AWS MySQL query to display data as a DataTable on a webpage

I recently managed to link a website to a Lambda function via AWS API Gateway to execute a SQL query on an Aurora Serverless MySQL database. The JSON response is currently displayed in string form on the webpage, appearing like this: https://i.sstatic.net ...