steps for adding text to the header with selenium webdriver

Question

steps for adding text to the header with selenium webdriver

I came across the following code snippet:

<body>
    <table>
      <tr>
        <td style= "width:30%;">
          <img class = "new" src="images/new-icon.png">
        <td>
            <h1>Hello there!</h1>
          <p>Thanks for logging in
            <span class = "blue">image edit application</span>.
            Get started by reading our
            <a href = "https:abc">documentation</a>
            or use the xxxxxxxxxxxx.
    </table>
  </body>

Now, I am looking to enhance this code by adding extra text after "Hello there!" in the header

using selenium webdriver with java script. Can anyone provide guidance on how to achieve this?

I attempted to locate the "Hello there!" heading using xpath and then tried to add text using sendKeys method. However, no text is being added and there are no errors thrown by the code. I am working on editing an HTML file through an online editor using selenium.

javascript selenium selenium-webdriver

Answer 1

Answer №1

To run JavaScript code in the browser, you can use the `executeScript()` function. This allows you to manipulate the DOM by adding or replacing text dynamically.

While I'm not very experienced with using Selenium with JS, here is a basic code snippet that you can test out:

let script = "theParent = document.getElementByTagName('body');
theKid = document.createElement('div');
theKid.innerHTML = 'Hello There!';

// append theKid to the end of theParent
theParent.appendChild(theKid);

// prepend theKid to the beginning of theParent
theParent.insertBefore(theKid, theParent.firstChild);"

driver.executeScript('return ' + script).then(function(return_value) { 
    console.log('returned ', return_value);
});

Answer 2

To run JavaScript code in the browser, you can use the `executeScript()` function. This allows you to manipulate the DOM by adding or replacing text dynamically.

While I'm not very experienced with using Selenium with JS, here is a basic code snippet that you can test out:

let script = "theParent = document.getElementByTagName('body');
theKid = document.createElement('div');
theKid.innerHTML = 'Hello There!';

// append theKid to the end of theParent
theParent.appendChild(theKid);

// prepend theKid to the beginning of theParent
theParent.insertBefore(theKid, theParent.firstChild);"

driver.executeScript('return ' + script).then(function(return_value) { 
    console.log('returned ', return_value);
});

steps for adding text to the header with selenium webdriver

Answer №1

Similar questions

Why is the lower sub-component positioned above the rest of the page?

Allowing a certain amount of time to pass before executing a method

"Utilizing JQuery to enhance task management by implementing a delete function

Unable to Display Embed Request Using Javascript in IE9 and IE10

Disable the ability to click on the indicators in the Bootstrap carousel

Excluding specific e2e tests in Protractor: A guide

jquery mouse event does not register on touch-based devices

Receive JSON data with camel-case in a Web API 2.0 using a model in pascal-case style

Integrating JSON with the DOM

dual slider controls on a single webpage

Best Practices for Retrieving Data with Django - Post Requests

Adding information to a CSV file using Selenium automated testing

Is it possible to use Vuelidate for password validation in Vue.js?

What is the best way to ensure a multi-page form is validated using HTML5 and JavaScript before progressing to the next page?

How can I access and modify objects within a state array in reactJS when using the setState() method?

Regex pattern is malfunctioning

What is the process of developing a straightforward Node.js script to encapsulate a binary or executable file?

Changes are not being detected in new Angular 2 files

How can data be transferred between web pages using jQuery or JavaScript?

"Need to refresh localStorage in VueJS after navigating back with this.$router.go(-1)? Here's how