Update the label on a webpage using Selenium's JavaScriptExecutor

We are currently working on a Japanese web application and are experimenting with a unique method to convert Japanese labels into English. Here is the approach we are using (though unsure if it's correct):

Approach (using Selenium):

  • Open the webpage.
  • Retrieve labels as we navigate through the webpage.

  • Send each label to an API (Japanese dictionary) for translation to English.

  • Set back the translated English word to the label using JavaScript executor.

I have successfully obtained the translated English words for the Japanese labels, but I am facing issues in setting them back on the webpage. Below is the piece of Selenium code attempting to achieve this:

JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("window.onload=function(){document.getElementById('expiry').textContent='Expiration Date';}");

Although there are no error messages in the Eclipse console, I cannot observe the English text on the page.

HTML

<html>
<body>
<table class="imui-form" style="width:1050px;">
<div class="imui-chapter-title" style="width:1050px;">
<h2>取引先情報</h2>
</div>
<tr>
<th style="width:80px;" >
<label id="expiry">有効期限</label>
</th>
<td style="width:220px;">
<input type="text" placeholder="" value="2016/08/09"  name="fromdate" id="fromdate" maxlength="" style="width:100px; height:15px;">
<img src="./imart/images/calendar_btn.png" />

&nbsp;~&nbsp;
<input type="text" placeholder="" value=""  name="todate" id="todate" maxlength="" style="width:100px; height:15px;">
<img src="./imart/images/calendar_btn.png" />
</td>
</table>
</body>
</html>

In light of this, I have two questions:

  1. Can someone advise me on whether my current approach is viable or suggest a better alternative?
  2. How can I ensure that the above JavaScript works correctly using Selenium?

Answer №1

For better results, consider implementing the following code snippet:

   WebElement expirationElement = driver.findElement(By.cssSelector("table.data-form tr:first-child th label#expiry"));
   
   JavascriptExecutor jsExecutor = ((JavascriptExecutor) driver);
   jsExecutor.executeScript("arguments[0].innerText='Expiration Date'", expirationElement);

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

Utilizing the power of functional programming with Javascript to perform mapping

In order to address a fundamental issue involving list indexes, I am seeking a functional solution. To illustrate this problem in the context of React and ramda, consider the following example. const R = require('ramda'); const array = ["foo", ...

Implementing automatic activation of a tab upon page load using Angular

I am currently working with a set of Bootstrap nav pills in my navigation bar. The 'ng-init' code in my Angular script sets the 'dateState' to 'past' on page load. However, I have noticed that the 'Past Events' nav p ...

Unable to reset HighCharts Speedometer value to zero

I am currently experimenting with implementing the highcharts speedometer. The goal is to simulate a connection meter - when there is a good connection, the meter should display values between 30 and 100. If the connection result from an Ajax call is any ...

In AngularJs, use ng repeat and ng switch to dynamically generate and display tables

I need help rendering a table with two columns using angularjs directives. <table> <tr ng-repeat="message in messages" > <td ng-switch-on="message.network" ng-switch when="twitter" ng-controller="TweetController"> <span> ...

Unable to fetch any attributes for the <table> element with Ajax

Something odd and complex is happening as I work on creating a hand-made calendar with the intention of open sourcing it. My goal is to achieve a look similar to Google Calendar, but surpass it in functionality while maintaining an open-source model. Every ...

How can methods access variables from the Vuex store during function calls?

Within my Vue.js component, there is a v-select element. Upon user selection in this widget, the toDo function is triggered from the methods block. However, when attempting to access the value of the filters getter within this function, it consistently ret ...

How can a TypeScript Angular directive utilize a function?

Recently, I have been following a unique Angular directive TypeScript pattern that I find really effective. The approach involves giving the directive its own isolated scope by creating a new controller. I encountered a scenario where I needed to invoke a ...

The page switch with a jittery effect

Could really use some assistance with this code that has been giving me trouble for quite a while now. It's a simple HTML, CSS, and JS code involving two pages. [The second page overlaps the first by default, but adjusting the z-index of the first p ...

Adjust an UpdatePanel with client-side code triggering server-side operations

I am fairly new to asp.net and have been experimenting with it for around a week now. Currently, I have a page that interacts with a web service, continuously checking its progress (shown in an UpdatePanel) until completion. Once the process is completed, ...

Can JavaScript functions be automated on a web browser using Power BI tables?

I am facing a challenge with saving data from a powerbi table on a daily basis. When I hover over the table and click on the ellipsis menu, a button element is generated in HTML that allows me to save the data to a CSV file using Selenium. However, achiev ...

How can Redux help persist input value through re-rendering?

Handling Input Value Persistence in Redux despite Re-rendering? I am currently able to store and save input values, but only the data from one step ago. For example, when I click on the second input field, it displays the value from the first input fiel ...

Master the art of animating ng-view transitions with AngularJS

I have 2 distinct HTML pages, namely welcome.html and login.html. These two pages are incorporated or "inserted" into a common page called index.html through the utilization of an exclusive attribute known as ngview, together with a router provider. This i ...

Using Selenium C# to populate a CheckedListBox with labels extracted from a CheckBoxList

Currently, I am working on automating a form using Selenium. The main challenge I am facing is extracting labels from a CheckBoxList that constantly changes on the page. My goal is to mirror these labels in a CheckedListBox on my form so that users can mak ...

What is the method for defining distinct parameters for nested functions in AngularJS?

When using AngularJS, what happens when a parent function encapsulates a child function that includes parameters not present in the parent? In this scenario illustrated below with the green arrow representing the parent function without any parameters, an ...

Issue with authentication when accessing Google Video API

I'm attempting to utilize the Google API provided: I have downloaded the Sample Project and followed these steps: 1) Navigate to the Project Folder named API Video 2) Run npm install 3) Set GCLOUD_PROJECT = neorisvideo 4) Download Json from the C ...

Ways to switch to a different tab using Selenium WebDriver

Is it possible to transfer control from an old tab to a new tab using WebDriver? Let's say I open a link in a new tab and need to perform some actions in that newly opened tab. How can this be achieved? Even after opening a link in a new tab, the con ...

Printing to the console: the array is empty and contains just one element simultaneously

I've encountered an issue regarding the console.log function that seems related to a specific case I found... JavaScript array length problem Upon checking my console, I noticed this output: https://i.stack.imgur.com/AbCdE.png The code snippet in ...

Loop through an array of objects, then store each one in MongoDB

If I receive an Array of Objects from a Facebook endpoint, how can I save each Object into my MongoDB? What is the best way to iterate over the returned Array and then store it in my mongoDB? :) The code snippet below shows how I fetch data from the Face ...

Accessing the outer index in a nested loop using Handlebars

Imagine I have the code below: <div> {{#each questions}} <div id="question_{{@index}}"> {{#each this.answers}} <div id="answer_{{howToGetThisIndex}}_{{@index}}"> {{this}} </div> {{/each}} </div> ...

The lower section of the scrollbar is not visible

Whenever the vertical scroll bar appears on my website, the bottom half of it seems to be missing. For a live demonstration, you can visit the site HERE (navigate to the "FURTHER READING" tab). HTML: <!DOCTYPE html> <html lang="en"> <h ...