0

In this picture we see we can get styles from copy > copy styles from chrome manually but is there anyway to do this with selenium

enter image description here

In this link get CSS Value of specific element with selenium but there is no way of doing it for all css rules applied [update: this way is unwanted even it brings all css rules because it doesnt bring dynamic values like 20vw instead brings hard coded computed values like 240.6px]

Besides in get all the computed css-styles from a specific dom-element unlike the result(Console Output:), I cant reproduce the result. for i.e. in page http://loader.to/ if we capture element which has body > div.container > div > div > div:nth-child(3) > label css selector and put it in elementSelectedWithCssSelector

with the code line of

driver.execute_script('var items = {}; for (index = 0; index < arguments[0].attributes.length; ++index) { items[arguments[0].attributes[index].name] = arguments[0].attributes[index].value }; return items;', elementSelectedWithCssSelector ) we get {'for': 'link'} but we were supposed to get css rules as the Console Output: in the SE answer were provided.[update: computed styled always has dynamic values problem mentioned before]

Or with elementSelectedWithCssSelector.get_attribute("style.cssText") I tried to get styles which returned nothing

[update]: I have tried some approach like Jortegas answer, but it seems the JS only can bring the computed styles

So my question are (answering one if it is equal to css rules the 'copy > copy styles from chrome' returns is enough, without dynamic values problem):

  1. is there any way of automating the copy > copy styles from chrome with selenium preferably or other tools?
  2. can it be done with chrome extension tools, I mean can I get access to these copy > copy styles with learning how to code an extension for chrome?
  3. [update: unwanted because of computedStyle-dynamicValue problem]or can we get all style rules with the ways were mentioned in the links I have provided here or any other way?
  4. can we get css rules with get_attribute in selenium?
Farhang Amaji
  • 742
  • 11
  • 24

1 Answers1

1

This is an example of how to get the css properties if the stack overflow link on the banner of this page.

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.firefox.service import Service
import sys
import json
sys.path.append('D:\\Path\\To\\geckodriver.exe')
service = Service('D:\\Path\\To\\geckodriver.exe')
driver = webdriver.Firefox(service=service)

driver.get("https://stackoverflow.com/questions/72669869/is-there-a-way-to-get-copy-styles-of-elements-with-python-selenium-in-chrome")

def get_css_properties(element):
    properties_dictionary = {}
    properties = driver.execute_script('return window.getComputedStyle(arguments[0], null);', element)
    for property_ in properties:
        properties_dictionary[property_] = element.value_of_css_property(property_)
    return properties_dictionary

element = WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.XPATH, "//span[text()='Stack Overflow']")))

css_props = get_css_properties(element)
print(json.dumps(css_props, indent=4, sort_keys=True))
Jortega
  • 3,616
  • 1
  • 18
  • 21
  • actually I have tried sth similar to this with selenium but the thing is I dont want `computed styles` because its hard code values like `360.4px` instead of `20vw`, anyway thanks for providing this answer. – Farhang Amaji Jun 21 '22 at 07:07