Selenium getAttribute ("background-color") dan getAttribute ("color") mengembalikan null

Question

Saya mencoba mendapatkan warna latar belakang elemen tubuh dan warna teks elemen tombol setelah mengklik tombol.

Kode 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>

Cara Kerja Kode HTML: Setelah mengklik tombol, warna latar belakang badan halaman berubah menjadi kuning dan warna teks tombol berubah menjadi merah sesuai dengan fungsi Javascript. Selain itu, atribut gaya ditambahkan sebaris ke badan dan elemen tombol di DOM seperti yang ditunjukkan di bawah ini:

<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>

Kode selenium:

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);

Sesuai dokumen Selenium untuk metode getAttribute ():

Dapatkan nilai atribut yang diberikan dari elemen tersebut. Akan mengembalikan nilai saat ini, meskipun ini telah diubah setelah halaman dimuat. Lebih tepatnya, metode ini akan mengembalikan nilai properti dengan nama yang diberikan, jika ada. Jika tidak, maka nilai atribut dengan nama yang diberikan dikembalikan. Jika tidak ada, null dikembalikan.

Tapi di sini mengembalikan null untuk color1 dan color2.

Saya ingin memahami mengapa metode getAttribute mengembalikan null.

Answer 1

Anda harus mendapatkan nilai CSS, bukan atribut. Kode contoh di bawah ini akan mencetak warna latar belakang sebelum dan setelah klik

WebElement.getCssValue("cssproperty") akan mengembalikan properti css masing-masing dari elemen tersebut

    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"));