Guide on changing an HTML element attribute using Python and Selenium

My dilemma lies in the fact that I need to modify the image source using selenium, but it lacks an id or class.

<div id="mbr-content">
            <div class="nope" some random stuff>
    <script>
    </script>

        <div class="mbr-image-container">
            <div class="mbr-image-wrapper">
                <div class="mbr-image">
                    <img src="this source need to modify" alt="app_image">
                </div>
            </div>
        </div>
    #Html continues here

For some reason, this is eluding me.

I am aware that I need to utilize this command, but I'm uncertain about what to insert as a script.

driver.execute_script("something here")

Working with python-3.7

javascriptpython-3.xseleniumselenium-webdriverwebdriver

Answer №1

To modify the src attribute of your <img> element using JavaScript, you need to use the following code:

document.querySelector(".mbr-image > img").src = "whatever value you desire";

You can implement the solution provided below:

jsCode = 'document.querySelector(".mbr-image > img").src = "whatever value you desire";'
driver.execute_script(jsCode)

Answer №2

After reviewing the HTML that you shared, here is a solution to edit the src attribute of the specific element:

target_element = driver.find_element_by_xpath("//div[@class='content']/img[@class='main-image']")
driver.execute_script("arguments[0].setAttribute('src', 'new_image_url')", target_element)

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

Click the text link in the dropdown menu to submit the form

I am currently working on a dropdown menu that includes various actions. However, I am facing an issue where I need assistance in submitting the form upon clicking a text link and passing the name attribute to the POST method. jQuery is already implement ...

javascriptjqueryformsjqueryform

My Gatsby website is being rendered in its HTML form on Netlify

The website build is located at . It appears that the javascript functionality is not working, and only the html version (usually meant for search engines) is being displayed. It seems like this issue is only affecting the home page. You can check out the ...

javascriptreactjsgatsbynetlify

Leveraging forms with django-translated-fields

Could you please assist with this issue? How can I implement ModelForm with django-translated-fields? Do you have any suggestions for a resolution? In essence, I am in the process of transitioning Speedy Net from using django-modeltranslation to django- ...

pythondjangopython-3.xdjango-translated-fields

Utilizing Python to automate email sending based on while loop conditions in a script

In my current Python project, the script is designed to visit a specific website (). It clicks on the link "Termin berlinweit suchen und buchen" and then continuously refreshes the page after a set interval until a change is detected on the webpage. The de ...

pythonseleniumselenium-webdriver

JSON file not found by the system

I am currently working on a basic program that consists of 3 files: 1. An HTML file named index.html 2. A JavaScript file named app.js 3. A JSON dataset called dataset.json I am struggling to make the browser recognize the data in my program. This is ...

javascriptjqueryjson

The @RequestParam annotation seems to be failing to retrieve a value

When a user inputs their phone number in my application, I want to check if that phone number is already in the database. To do this, I am using an onchange event to instantly send the phone number for validation. However, I am facing an issue where the da ...

javascriptjqueryajaxspring-bootbad-request

Monitor the user's attendance by utilizing two separate for loops

I'm currently developing an angularjs attendance tracking system and I'm facing challenges when it comes to accurately counting the number of days an employee is absent. Despite attempting to solve this issue with two nested for loops, I am still ...

javascriptangularjsfor-loop

The two CSS classes are styled with different border-color values, but only one is being applied correctly

My goal is to modify the border color of a textarea using jQuery. Previously, I achieved this by using .css("border-color","rgb(250,0,0)"), and it was working perfectly. However, I have now been advised against using CSS directly in JavaScript and told to ...

javascriptjqueryhtmlcss

Adapting iFrame height to accommodate fluctuating content height in real time (details included)

I have an embedded iframe that contains a form with jQuery validation. When errors occur, the content height of the iframe increases dynamically. Below is the script I use to adjust the height of my iframe based on its content: function doIframe(){ o = d ...

javascriptjqueryhtmliframe

AngularJS - Calculate multiple currencies

I need to calculate the product of a value and months. For the input value, I am utilizing a Jquery Plugin to apply a currency mask. Unfortunately, the calculations are not functioning properly with this plugin. My goal is to multiply the value, includin ...

javascriptjqueryangularjscurrency

I encountered an issue while using the tab bar feature in Bootstrap where I wasn't able to navigate back to the first tab or any

My current project involves JavaScript, and I integrated a Bootstrap tab bar component. However, when I try to run the code in Google Chrome, I encounter an issue. The first time I select the first tab, the content displays correctly. But when I select the ...

javascriptjquerybootstrap-4navigationtabbar

Is it possible to reference a .js file within an HTML file using AngularJS?

Having a slight issue with an email function. I experimented with the 'nodemailer' package and successfully sent an email when coding in a .js file. Upon calling the .js file (node emailfile.js), the email was received as expected (code provided ...

javascriptangularjsnodemailer

Display a dialog box in jQuery UI 1.7 autocomplete when an item is selected

After implementing an autocomplete widget, I noticed that a dialog appears when an item is selected. However, I am struggling to get a specific field in the dialog to receive focus upon opening. Here is what I have attempted so far: //HTML <form actio ...

javascriptjqueryhtmljquery-ui

Display information based on the radio button chosen

I've set up a radio button with options for "no" and "yes", but neither is selected by default. Here's what I'm trying to achieve: If someone selects "no", nothing should happen. However, if they select "yes", then a message saying "hello w ...

javascriptjqueryhtmlcss

Executing a jQuery AJAX request for a second time

Upon hitting the submit button for the first time, the codes work successfully. However, upon hitting the button for the second time with correct email and password values, nothing happens and the user cannot log in. I have identified that the issue lies w ...

javascriptphpjqueryajax

Obtain the search query stored in the state using ReactJS

I'm currently exploring ReactJS and attempting to retrieve the value entered in a search input box, then store it in a state. Here is my code snippet: <form className="search-form" onSubmit={this.handleSubmit}> <input type="search" na ...

javascriptreactjs

Clicking within a table cell will grant access to the adjacent cells

I have a table set up to display items, and I want to create an onclick event on cell[0] that will alert the data from cell[1] and cell[2. Can someone help me figure out the best approach to access this information? If you need to see my current code, it ...

javascripthtml

Can components in Vue.js share functions?

Within my application, there exists a plethora of utility functions that handle various tasks such as parsing strings and displaying toasts. My main inquiry is regarding how to access these functions within other .vue files without the need for redundant ...

javascriptvue.js

unable to retrieve the properties of req.user

Currently, I am working on developing a multiplayer game that involves a login system. Within my app.js file, the following code snippet allows me to access user information: app.use(function (req, res, next) { res.locals.success_msg = req.flash('s ...

javascriptnode.jsmongodbexpress

Unable to access a variable from a MongoDB query that is being awaited

Having an issue utilizing the mongodb query result in another query. Here's some code for reference (inside an async function) - Pay attention to how I'm using created_comment._id in the second query: let created_comment = await Comment.create(n ...

javascriptmongodbpromiseasync-await