Selenium getAttribute ("background-color") et getAttribute ("color") renvoie null

Question

J'essaie d'obtenir la couleur d'arrière-plan de l'élément corps et la couleur du texte de l'élément bouton après avoir cliqué sur le bouton.

Code HTML:

<html>
<head>     
<style>

#container
{
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
    overflow-x: scroll;
}

#content
{
    margin:4px, 4px; 
    padding:4px; 
    width: 500px; 
    height:500px; 
    text-align:justify; 
    background-color: #ccc;
}

</style>
</head>
<body>

<div id="container">
  <div id="content">Click the button to slide right!</div>
</div>

<button id="slide" type="button" onclick="dem_func()">Slide right</button>

<script>

function dem_func()
{
    document.getElementById('container').scrollLeft += 50;
<!-- Changing the text color of button element-->
    document.getElementById('slide').style.color='red'
<!-- Changing the background color of body element-->
    document.body.style.backgroundColor='yellow'
    return document.getElementById('slide').style.color
}

</script>
</body>
</html>

Fonctionnement du code HTML: Après avoir cliqué sur le bouton, la couleur de fond du corps de la page passe au jaune et la couleur du texte du bouton passe au rouge selon la fonction Javascript. En outre, l'attribut style est ajouté en ligne à l'élément body et button dans le DOM, comme indiqué ci-dessous:

<body style="background-color: yellow;">

<div id="container">
  <div id="content">Click the button to slide right!</div>
</div>

<button id="slide" type="button" onclick="dem_func()" style="color: red;">Slide right</button>

Code sélénium:

String color1 = driver.findElement(By.xpath("child::html/child::body")).getAttribute("background-color");
System.out.println("Color of the background of body element: " + color1);
String color2 = driver.findElement(By.xpath("//button")).getAttribute("color");
System.out.println("Color of the text of button element: " + color2);

Selon la documentation Selenium pour la méthode getAttribute ():

Récupère la valeur de l'attribut donné de l'élément. Renvoie la valeur actuelle, même si celle-ci a été modifiée après le chargement de la page. Plus exactement, cette méthode retournera la valeur de la propriété avec le nom donné, si elle existe. Si ce n'est pas le cas, la valeur de l'attribut avec le nom donné est renvoyée. S'il n'y en a aucun, null est renvoyé.

Mais ici, il renvoie null pour color1 et color2.

Je veux comprendre pourquoi la méthode getAttribute renvoie null.

Answer 1

Vous devriez obtenir la valeur CSS au lieu de l'attribut.L'exemple de code ci-dessous imprimera la couleur d'arrière-plan avant et après le clic

WebElement.getCssValue("cssproperty") renverra la propriété css respective de l'élément

    WebElement body=driver.findElement(By.tagName("body"));
    WebElement button=driver.findElement(By.id("slide"));
    System.out.println("Body bg-color Before Click: "+body.getCssValue("background-color"));
    System.out.println("Button bg-color Before Click: "+button.getCssValue("color"));
    System.out.println();
    button.click();
    System.out.println("Body bg-color After Click: "+body.getCssValue("background-color"));
    System.out.println("Button bg-color After Click: "+button.getCssValue("color"));