1

Here's the HTML

<img src="//www.shahidpro.tv/uploads/articles/220cc817.jpg" width="408" height="605" vspace="" hspace="" border="0" alt="">

I am trying to add 3 new attributes to make it like

<img src="//www.shahidpro.tv/uploads/articles/220cc817.jpg" width="408" height="605" vspace="" hspace="" border="0" alt="" style="display: block; margin-left: auto; margin-right: auto;" data-mce-style="display: block; margin-left: auto; margin-right: auto;" data-mce-selected="1">

I want to add:

  • style="display: block; margin-left: auto; margin-right: auto;"
  • data-mce-style="display: block; margin-left: auto; margin-right: auto;" and
  • data-mce-selected="1"

I tried:

image = WebDriverWait(browser, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "body.mce-content-body#tinymce > p/a/img")))
browser.execute_script("arguments[0].style='display: block; margin-left: auto; margin-right: auto;'", image)
browser.execute_script("arguments[0].data-mce-style='display: block; margin-left: auto; margin-right: auto;'", image)
browser.execute_script("arguments[0].data-mce-selected='1'", image)     ` but got no results nor errors
undetected Selenium
  • 183,867
  • 41
  • 278
  • 352
Amr
  • 119
  • 1
  • 10
  • https://sqa.stackexchange.com/questions/3387/set-attribute-of-an-element-using-webdriver-python – Swaroop Humane Sep 09 '20 at 21:06
  • I tried the following but got no results nor errors `image = WebDriverWait(browser, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "body.mce-content-body#tinymce > p/a/img")))` `browser.execute_script("arguments[0].style='display: block; margin-left: auto; margin-right: auto;'", image)` `browser.execute_script("arguments[0].data-mce-style='display: block; margin-left: auto; margin-right: auto;'", image)` `browser.execute_script("arguments[0].data-mce-selected='1'", image) ` – Amr Sep 09 '20 at 21:30

2 Answers2

1

Let's say you can find element that you want to change. You can add new attribute using js:

driver.execute_script("arguments[0].setAttribute('style', 'display: block; margin-left: auto; margin-right: auto;');", element)
1

To add the three new attributes you need to use Selenium's execute_script() method.

Now, you want to add the following attributes:

  • style="display: block; margin-left: auto; margin-right: auto;"
  • data-mce-style="display: block; margin-left: auto; margin-right: auto;"
  • data-mce-selected="1"

The method for adding them would be similar and as a demonstration to add the attribute data-mce-selected="1" you need to induce WebDriverWait for the visibility_of_element_located() and you can use either of the following Locator Strategies:

  • Using CSS_SELECTOR:

    element = WebDriverWait(browser, 20).until(EC.visibility_of_element_located((By.CSS_SELECTOR, "img[src='//www.shahidpro.tv/uploads/articles/220cc817.jpg']")))
    browser.execute_script("arguments[0].setAttribute('value','28/02')", element)
    
  • Using XPATH and in a single line:

    browser.execute_script("arguments[0].setAttribute('data-mce-selected','1')", WebDriverWait(browser, 20).until(EC.visibility_of_element_located((By.XPATH, "//img[@src='//www.shahidpro.tv/uploads/articles/220cc817.jpg']"))))
    

References

You can find a couple of relevant detailed discussions in:

undetected Selenium
  • 183,867
  • 41
  • 278
  • 352