Having trouble entering text into a textarea field labeled with "area-label" and receiving an error stating that the element

Apologies for the vague title, can someone suggest a better one?

Here are the details of the issue I am encountering:

Website: 

https://www.desmos.com/calculator/lzidy3m70r

Steps:

  1. Click on the + button on the top left
  2. Select images and upload an image
  3. Update values in the center, width, and height fields

Issue: Unable to interact with any of the text areas for center, width, and height. Keep receiving 'element not interactable' exception.

Here is the HTML https://i.sstatic.net/zDfkV.jpg

There is no input tag for the width field; only 2 separate span elements show '15', and the textarea is also not interactive.

Here is my XPath to identify the textarea or span:

//textarea[contains(@class,'dcg-smart-textarea') and text()='"+imageName+"']/parent::div/parent::div/following-sibling::div//span[@class='dcg-mq-textarea']/textarea

//textarea[contains(@class,'dcg-smart-textarea')]/parent::div/parent::div/following-sibling::div//span[@class='dcg-mq-root-block dcg-mq-editing-overflow-right']/span

I have tried various methods such as clicking on the div first and then attempting to type when the cursor is available, or clicking first, clearing, and then typing. However, after the click is successful, the next step fails with the 'element not interactable' exception.

I believe using JavascriptExecutor may be necessary to handle this situation, but I am not very familiar with JavaScript or how to deal with these fields.

Can anyone help me solve this problem and successfully enter values for the center, width, and height fields?

javascriptjavaseleniumselenium-webdriverui-automation

Answer №1

No JavaScript executor is required in this scenario.

Here is the XPath to use:

//div[text()='Center:']//following-sibling::div

You can find all the web elements related to div fields for center, width, and height using this XPath.

To target the first element, I am utilizing xpath indexing:

(//div[text()='Center:']//following-sibling::div)[1]

This will focus on the first center field.

In addition, we need to clear the default value present in that div by using a loop.

Snippet of Code :

    driver.manage().window().maximize();
    WebDriverWait wait = new WebDriverWait(driver, 30);
    driver.get("https://www.desmos.com/calculator/lzidy3m70r");
    Actions action = new Actions(driver);
    WebElement centerWebElement = wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("(//div[text()='Center:']//following-sibling::div)[1]")));
    centerWebElement.click();
    for (int i = 0; i<=10 ; i++) {
        action.moveToElement(centerWebElement).sendKeys(Keys.BACK_SPACE).build().perform();
        Thread.sleep(100);
        System.out.println("Clicked on delete for "+ i + " time");
    }
    new Actions(driver).moveToElement(centerWebElement).pause(2).sendKeys("2021, 2021").build().perform();

Similarly, for the first width:

(//div[text()='Center:']//following-sibling::div)[3]

and for the first height:

(//div[text()='Center:']//following-sibling::div)[7]

These steps should assist you in resolving the issue at hand.

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 how to dynamically update information with Angular

Looking to dynamically update data when a user selects an option from a dropdown menu using the Angular framework This is what I currently have: <div> <button type="button"> {{tests[0].test}} </button> <ul c ...

javascripthtmlangularjs

Unable to utilize the Object.values method with an object in TypeScript

I am attempting to create an array of values from all the keys within an object by using the Object.values(obj) function, but I encountered the following error message: No overload matches this call. Overload 1 of 2, '(o: { [s: string]: string; } | ...

javascriptreactjstypescriptnext.js

Automatically generated webpage smoothly scrolling downward

Within my application, I have been developing dynamic pages with a CSS property of overflow-y:auto applied to the page container. Everything seems to be working fine, The issue arises when the page loads and the height exceeds that of the container. While ...

javascriptjqueryhtmlcss

Using Selenium can sometimes cause xpaths to become scrambled

I am currently working on scraping a website at 'https://www.lamiastampante.it/cerca_codice_cartuccia.php?codice=D111L&lg=it' using Python with Selenium. My goal is to click on the title of the first product that appears in my search results. ...

pythonseleniumxpathweb-scraping

Upon updating my application from Angular 14 to 16, I encountered an overwhelming number of errors within the npm packages I had incorporated

After upgrading my angular application from v14 to v16, I encountered numerous peer dependencies issues, which led me to use the --force flag for the upgrade process. However, upon compiling, I am now faced with a multitude of errors as depicted in the scr ...

javascriptangulartypescriptnpmangular-ivy

Restricting the movement of the mouse event

Is there a way to restrict the mousemove event to a specific area, such as a div located in the center of the page? Thank you in advance if (window.innerWidth > 765) if (matchMedia('(pointer:fine)').matches) $(document).ready(function() { $ ...

javascriptjquerymousemove

Ways to retrieve the upcoming possible date

I'm currently working on a project using express and I need to implement a scheduling calendar. My goal is to provide users with the next available day in the format YYYY-MM-DD. Here are the rules for determining the next available day: The default ...

javascriptnode.js

Sharing information between fragments in an Android application

I have a project with 2 fragments. The first fragment displays a list of items, and I want the details to change in the second fragment when a topic is selected in the first fragment. I'm able to pass data between the fragments, but the view is not ch ...

javaandroidandroid-fragmentsonitemclicklistenerpass-data

Triggering Events with Angular Checkboxes

I'm having trouble getting a console log to trigger when the user checks one of the checkboxes. The script is working fine for everything else, but checkbox clicks are not registering any events. Any suggestions on why this might be happening? (Just ...

javascriptjqueryangularjs

Utilizing Media Queries with Dynamic Vue Properties

On one of my website pages, I always have a Div element with a Background Image that changes based on Media Queries (for example, I fetch a smaller resolution from my CDN on mobile phones). However, since I retrieve the Image URL on Page Load, I need to s ...

javascriptcssvue.jsvuejs2

Steps to trigger a Bootstrap modal when the user clicks anywhere on the webpage

I need assistance with setting up a Bootstrap dialogue modal to open at the clicked position on a mousedown event when a user interacts with the page. Despite my attempts, the dialogue modal is not opening where it should be. Here's what I've tri ...

javascriptjquerycsstwitter-bootstrap-3modal-dialog

Error: When refreshing the webpage, a TypeError occurs because the property '1' is attempting to be read from an undefined object

Retrieving the user collection from firebase: const [userInfo, setUserInfo] = useState([]) useEffect(() => { if (currentUser) { const unsubscribe = db .collection("users") .doc(uid) .onSna ...

javascriptreactjsfirebasegoogle-cloud-firestore

Can Vuex getters be utilized in a Vue component's computed property?

I have various variables in my vuex-store, such as loggedIn. I need to access this variable from the computed section of my component to filter an array based on its value. Here is how I am trying to implement it in my code: <td v-for="(item, index) i ...

javascriptvue.jsvuejs2vue-componentvuex

Can we use JAXB to exclude child elements based on their element values?

Is there a way for me to access specific elements based on their values in the XML structure, such as retrieving the map position element with the ID of 2? Here is the XML structure: <table> <position> <id>1</id> </ ...

javaxmlparsingxml-parsingjaxb

The variable ReactFauxDOM has not been declared

Exploring the combination of D3 and React components. Utilizing OliverCaldwell's Faux-DOM element has led me to encounter a frustrating error message stating "ReactFauxDOM is not defined”. Despite following the npm install process correctly... It s ...

javascriptd3.jsreactjs

An elusive static image file goes unseen within the realm of node.js/express

I am encountering an issue with serving static files in Express on Node.js. When I request a .css file from the server, everything works fine. However, if I try to load an image such as a jpg or png, it just shows a blank white page without any error messa ...

javascriptnode.jsexpresscloud9-ide

Move the alt attribute from the image to the paragraph text using jQuery or JavaScript and replace it

Struggling to crack the code conundrum that has been taunting me for what seems like an eternity! <div id="slider"> <ul> <!-- --> <li><a target="_blank" href="ANOUK-2014-De-l ...

javascriptjqueryhtml

What could be causing this program to continuously add values to the message table whenever the page is refreshed?

Looking for a simple chatting system using php, mysql, html, css and javascript? Check out this code snippet. However, there seems to be an issue with the message sending functionality. Every time a user sends a message and refreshes the page, the same m ...

javascriptphphtmlcssmysql

Header Stability TransitionAndView

I'm not very experienced with JavaScript, so please bear with me. I'm attempting to create a fixed header that transitions to 50% opacity when scrolled down and returns to full opacity (opacity: 1.0) when scrolled back to the top. Here is my cur ...

javascriptjquerycsshtml

Clone the children of an li element using jQuery, modify the text within a child tag, and then add it to

I have some awesome CSS that I want to recycle within a <ul>. My plan is to duplicate an existing <li> (to leverage the CSS), modify a <p> element, and then add it at the end of the <ul>. I believe I can achieve this by locating... ...

javascriptjqueryhtmlcloneinnerhtml