私は自分の練習で自動テストを使用しようとしています。 同時に、ツールやライブラリを作成せずに、簡単なアプローチを採用しようとしています。 少し前まで、CSSファイルをテストする方法について考えていました。 インターネットでの検索により、この問題に関する次の観点が明らかになりました。
- CSSテストは宣言型言語であり、その結果は視覚的にのみ評価できるページレイアウトであるため、意味がありません。
- CSSは、生成されたページからビットマップを削除し、参照画像と調整することでテストできます。 このためのツールもいくつかあります。
- いくつかのCSSユニットライブラリが見つかりました。
私はすべてのオプションが好きではなかったと言わなければなりません。 最終的に、テキストエディター、Firefox + Selenium IDEなどを使用してCSSをテストすることができました。
理論のビット
最も建設的なアイデアは、FirebagタブのCompiled Styleタブでの長い瞑想によってもたらされました。
このウィンドウの内容から、ブラウザが少なくとも2段階でページを生成することが明らかになりました。
- CSSに基づくすべての要素のすべてのパラメーターの定義
- 受信した値に基づくページレイアウト
ビットマップ以外の方法で2番目のステージをテストできない場合、最初のステージはおそらく自動テストに役立ちます。 しかし実際には、最初の段階で、CSS記述のほとんどすべてのエラーが発生します。 Webレイアウトデザイナーは、人生の半分以上を費やして、スタイルのデバッグウィンドウ内の取り消し線と強調表示された行を調べ、何を継承し、何に適用したかを理解しようとします。 これのテストに成功したら、プロジェクトのCSSファイルに関する問題のほとんどを取り除きます。
必要なのは、FirebagタブのCompiled Styleタブに表示される値にアクセスすることだけです。 インターネット上の短いヨーが機能の発見につながりました。
var style = window.getComputedStyle(element[, pseudoElt]);
名前はそれ自体を物語っています。 明確にできるのは2番目のパラメーターだけです。 たとえば、リンクの上にマウスを置いたときにリンクがどの色になるかを知りたい場合に役立ちます。 Selenium IDEには、JavaScript式を評価できる
xxxEval
関数の素晴らしいファミリがあることを思い出してください。 これで、すべてを実際に試すことができます。
ちょっとした練習
少し準備作業を行います。 フォルダー構造を作成します。
project – project/css – css project/tests – project/tests/html-examples – html- project/tests/selenium-tests – Selenium-
私たちは、お気に入りのhttpサーバーの制御下で
project
フォルダーを提供し、そのフォルダーへのアクセスを設定します
project.localhost
project.localhost
。
根元では、長い間確立された習慣に従って、
index.html
ファイルを開始します。これにより、プロジェクトが本物のように見え、プロジェクトのソースコードも象徴します。 同時に、styles.cssファイルを開始します。このファイルには、開発およびテストするCSSコードが含まれています。
プロジェクトで通知メッセージを表示する必要があるとします。 それらは緑色で表示されるはずです。 メッセージは、ヘッダー
. 20px , 14px
. . index.html
styles.css
:
project.localhost/index.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest</h1> <p>Welcome to our beautiful world!</p> </div> </body> </html>
project.localhost/css/styles.css
div.notify-message h1 { color:green; font-size: 20px; } div.notify-message p { color:green; font-size: 14px; }
styles.css
. index.html
. , ( -). notify-message-example.html
project.localhost/tests/html-examples/notify-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="notify-message"> <h1 id="h1-test">Notify message</h1> <p id="p-test">It's notify message</p> </div> </body> </html>
id
, DOM-. -test
, id
. Firefox Selenium IDE ( , Selenium IDE HTML-, , ):
project.localhost/tests/selenium-tests/notify-message-test.html
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
[error] Actual value 'rgb(0, 128, 0)' did not match 'green'
[error] Actual value 'rgb(0, 128, 0)' did not match 'green
'
getComputedStyle()
rgb(r,g,b)
. , . , . .
project.localhost/tests/selenium-tests/notify-message-test.html v2
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
, . , , .
project.localhost/tests/html-examples/clear-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1 id="h1-test">Not message</h1> <p id="p-test">It is not message</p> </body> </html>
project.localhost/tests/selenium-tests/clear-test.html
open /tests/html-examples/clear-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
.
– , , .
, ? – . , . CSS , , , . . CSS, , . . .
project.localhost/css/styles.css v2
div.notify-message h1{ color:green; } div.notify-message h1 { font-size: 20px; } div.notify-message p { font-size: 14px; }
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(0, 128, 0)'
, !!! .
div.notify-message
h1
{
color:green;
}
.
CSS TDD
Test Driven Development. , ( , ) web- web- - . ( – , ). , , . , index.html
, , :
project.localhost/index.html v2
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest !</h1> <p>Welcome to our beautiful word!</p> </div> <div class="error-message"> <h1>You are not authorized.</h1> <p>Please login or register now.</p> </div> </body> </html>
“ ”, , , " ", web– :
project.localhost/tests/html-examples/error-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="error-message"> <h1 id="h1-test">Error message</h1> <p id="p-test">It's error message</p> </div> </body> </html>
Selenium IDE :
project.localhost/tests/selenium-tests/error-message-test.html
open /tests/html-examples/error-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value '32px' did not match '20px'
[error] Actual value '16px' did not match '14px'
TDD . CSS.
project.localhost/css/styles.css v3
div.error-message { color:red; } div.notify-message { color:green; } div.notify-message h1, div.error-message h1 { font-size: 20px; } div.notify-message p, div.error-message p { font-size: 14px; }
.
, , . . html-examples
html-. . - html . , – . , .
TDD-, :
, CSS- .
構成され
. 20px , 14px
. . index.html
styles.css
:
project.localhost/index.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest</h1> <p>Welcome to our beautiful world!</p> </div> </body> </html>
project.localhost/css/styles.css
div.notify-message h1 { color:green; font-size: 20px; } div.notify-message p { color:green; font-size: 14px; }
styles.css
. index.html
. , ( -). notify-message-example.html
project.localhost/tests/html-examples/notify-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="notify-message"> <h1 id="h1-test">Notify message</h1> <p id="p-test">It's notify message</p> </div> </body> </html>
id
, DOM-. -test
, id
. Firefox Selenium IDE ( , Selenium IDE HTML-, , ):
project.localhost/tests/selenium-tests/notify-message-test.html
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
[error] Actual value 'rgb(0, 128, 0)' did not match 'green'
[error] Actual value 'rgb(0, 128, 0)' did not match 'green
'
getComputedStyle()
rgb(r,g,b)
. , . , . .
project.localhost/tests/selenium-tests/notify-message-test.html v2
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
, . , , .
project.localhost/tests/html-examples/clear-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1 id="h1-test">Not message</h1> <p id="p-test">It is not message</p> </body> </html>
project.localhost/tests/selenium-tests/clear-test.html
open /tests/html-examples/clear-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
.
– , , .
, ? – . , . CSS , , , . . CSS, , . . .
project.localhost/css/styles.css v2
div.notify-message h1{ color:green; } div.notify-message h1 { font-size: 20px; } div.notify-message p { font-size: 14px; }
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(0, 128, 0)'
, !!! .
div.notify-message
h1
{
color:green;
}
.
CSS TDD
Test Driven Development. , ( , ) web- web- - . ( – , ). , , . , index.html
, , :
project.localhost/index.html v2
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest !</h1> <p>Welcome to our beautiful word!</p> </div> <div class="error-message"> <h1>You are not authorized.</h1> <p>Please login or register now.</p> </div> </body> </html>
“ ”, , , " ", web– :
project.localhost/tests/html-examples/error-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="error-message"> <h1 id="h1-test">Error message</h1> <p id="p-test">It's error message</p> </div> </body> </html>
Selenium IDE :
project.localhost/tests/selenium-tests/error-message-test.html
open /tests/html-examples/error-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value '32px' did not match '20px'
[error] Actual value '16px' did not match '14px'
TDD . CSS.
project.localhost/css/styles.css v3
div.error-message { color:red; } div.notify-message { color:green; } div.notify-message h1, div.error-message h1 { font-size: 20px; } div.notify-message p, div.error-message p { font-size: 14px; }
.
, , . . html-examples
html-. . - html . , – . , .
TDD-, :
, CSS- .
. 20px
, 14px
. . index.html
styles.css
:
project.localhost/index.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest</h1> <p>Welcome to our beautiful world!</p> </div> </body> </html>
project.localhost/css/styles.css
div.notify-message h1 { color:green; font-size: 20px; } div.notify-message p { color:green; font-size: 14px; }
styles.css
. index.html
. , ( -). notify-message-example.html
project.localhost/tests/html-examples/notify-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="notify-message"> <h1 id="h1-test">Notify message</h1> <p id="p-test">It's notify message</p> </div> </body> </html>
id
, DOM-. -test
, id
. Firefox Selenium IDE ( , Selenium IDE HTML-, , ):
project.localhost/tests/selenium-tests/notify-message-test.html
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
[error] Actual value 'rgb(0, 128, 0)' did not match 'green'
[error] Actual value 'rgb(0, 128, 0)' did not match 'green
'
getComputedStyle()
rgb(r,g,b)
. , . , . .
project.localhost/tests/selenium-tests/notify-message-test.html v2
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
, . , , .
project.localhost/tests/html-examples/clear-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1 id="h1-test">Not message</h1> <p id="p-test">It is not message</p> </body> </html>
project.localhost/tests/selenium-tests/clear-test.html
open /tests/html-examples/clear-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
.
– , , .
, ? – . , . CSS , , , . . CSS, , . . .
project.localhost/css/styles.css v2
div.notify-message h1{ color:green; } div.notify-message h1 { font-size: 20px; } div.notify-message p { font-size: 14px; }
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(0, 128, 0)'
, !!! .
div.notify-message
h1
{
color:green;
}
.
CSS TDD
Test Driven Development. , ( , ) web- web- - . ( – , ). , , . , index.html
, , :
project.localhost/index.html v2
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest !</h1> <p>Welcome to our beautiful word!</p> </div> <div class="error-message"> <h1>You are not authorized.</h1> <p>Please login or register now.</p> </div> </body> </html>
“ ”, , , " ", web– :
project.localhost/tests/html-examples/error-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="error-message"> <h1 id="h1-test">Error message</h1> <p id="p-test">It's error message</p> </div> </body> </html>
Selenium IDE :
project.localhost/tests/selenium-tests/error-message-test.html
open /tests/html-examples/error-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value '32px' did not match '20px'
[error] Actual value '16px' did not match '14px'
TDD . CSS.
project.localhost/css/styles.css v3
div.error-message { color:red; } div.notify-message { color:green; } div.notify-message h1, div.error-message h1 { font-size: 20px; } div.notify-message p, div.error-message p { font-size: 14px; }
.
, , . . html-examples
html-. . - html . , – . , .
TDD-, :
, CSS- .
. 20px
, 14px
. . index.html
styles.css
:
project.localhost/index.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest</h1> <p>Welcome to our beautiful world!</p> </div> </body> </html>
project.localhost/css/styles.css
div.notify-message h1 { color:green; font-size: 20px; } div.notify-message p { color:green; font-size: 14px; }
styles.css
. index.html
. , ( -). notify-message-example.html
project.localhost/tests/html-examples/notify-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="notify-message"> <h1 id="h1-test">Notify message</h1> <p id="p-test">It's notify message</p> </div> </body> </html>
id
, DOM-. -test
, id
. Firefox Selenium IDE ( , Selenium IDE HTML-, , ):
project.localhost/tests/selenium-tests/notify-message-test.html
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
[error] Actual value 'rgb(0, 128, 0)' did not match 'green'
[error] Actual value 'rgb(0, 128, 0)' did not match 'green
'
getComputedStyle()
rgb(r,g,b)
. , . , . .
project.localhost/tests/selenium-tests/notify-message-test.html v2
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
, . , , .
project.localhost/tests/html-examples/clear-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1 id="h1-test">Not message</h1> <p id="p-test">It is not message</p> </body> </html>
project.localhost/tests/selenium-tests/clear-test.html
open /tests/html-examples/clear-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
.
– , , .
, ? – . , . CSS , , , . . CSS, , . . .
project.localhost/css/styles.css v2
div.notify-message h1{ color:green; } div.notify-message h1 { font-size: 20px; } div.notify-message p { font-size: 14px; }
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(0, 128, 0)'
, !!! .
div.notify-message
h1
{
color:green;
}
.
CSS TDD
Test Driven Development. , ( , ) web- web- - . ( – , ). , , . , index.html
, , :
project.localhost/index.html v2
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest !</h1> <p>Welcome to our beautiful word!</p> </div> <div class="error-message"> <h1>You are not authorized.</h1> <p>Please login or register now.</p> </div> </body> </html>
“ ”, , , " ", web– :
project.localhost/tests/html-examples/error-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="error-message"> <h1 id="h1-test">Error message</h1> <p id="p-test">It's error message</p> </div> </body> </html>
Selenium IDE :
project.localhost/tests/selenium-tests/error-message-test.html
open /tests/html-examples/error-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value '32px' did not match '20px'
[error] Actual value '16px' did not match '14px'
TDD . CSS.
project.localhost/css/styles.css v3
div.error-message { color:red; } div.notify-message { color:green; } div.notify-message h1, div.error-message h1 { font-size: 20px; } div.notify-message p, div.error-message p { font-size: 14px; }
.
, , . . html-examples
html-. . - html . , – . , .
TDD-, :
, CSS- .
. 20px
, 14px
. . index.html
styles.css
:
project.localhost/index.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest</h1> <p>Welcome to our beautiful world!</p> </div> </body> </html>
project.localhost/css/styles.css
div.notify-message h1 { color:green; font-size: 20px; } div.notify-message p { color:green; font-size: 14px; }
styles.css
. index.html
. , ( -). notify-message-example.html
project.localhost/tests/html-examples/notify-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="notify-message"> <h1 id="h1-test">Notify message</h1> <p id="p-test">It's notify message</p> </div> </body> </html>
id
, DOM-. -test
, id
. Firefox Selenium IDE ( , Selenium IDE HTML-, , ):
project.localhost/tests/selenium-tests/notify-message-test.html
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
[error] Actual value 'rgb(0, 128, 0)' did not match 'green'
[error] Actual value 'rgb(0, 128, 0)' did not match 'green
'
getComputedStyle()
rgb(r,g,b)
. , . , . .
project.localhost/tests/selenium-tests/notify-message-test.html v2
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
, . , , .
project.localhost/tests/html-examples/clear-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1 id="h1-test">Not message</h1> <p id="p-test">It is not message</p> </body> </html>
project.localhost/tests/selenium-tests/clear-test.html
open /tests/html-examples/clear-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
.
– , , .
, ? – . , . CSS , , , . . CSS, , . . .
project.localhost/css/styles.css v2
div.notify-message h1{ color:green; } div.notify-message h1 { font-size: 20px; } div.notify-message p { font-size: 14px; }
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(0, 128, 0)'
, !!! .
div.notify-message
h1
{
color:green;
}
.
CSS TDD
Test Driven Development. , ( , ) web- web- - . ( – , ). , , . , index.html
, , :
project.localhost/index.html v2
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest !</h1> <p>Welcome to our beautiful word!</p> </div> <div class="error-message"> <h1>You are not authorized.</h1> <p>Please login or register now.</p> </div> </body> </html>
“ ”, , , " ", web– :
project.localhost/tests/html-examples/error-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="error-message"> <h1 id="h1-test">Error message</h1> <p id="p-test">It's error message</p> </div> </body> </html>
Selenium IDE :
project.localhost/tests/selenium-tests/error-message-test.html
open /tests/html-examples/error-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value '32px' did not match '20px'
[error] Actual value '16px' did not match '14px'
TDD . CSS.
project.localhost/css/styles.css v3
div.error-message { color:red; } div.notify-message { color:green; } div.notify-message h1, div.error-message h1 { font-size: 20px; } div.notify-message p, div.error-message p { font-size: 14px; }
.
, , . . html-examples
html-. . - html . , – . , .
TDD-, :
, CSS- .
. 20px
, 14px
. . index.html
styles.css
:
project.localhost/index.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest</h1> <p>Welcome to our beautiful world!</p> </div> </body> </html>
project.localhost/css/styles.css
div.notify-message h1 { color:green; font-size: 20px; } div.notify-message p { color:green; font-size: 14px; }
styles.css
. index.html
. , ( -). notify-message-example.html
project.localhost/tests/html-examples/notify-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="notify-message"> <h1 id="h1-test">Notify message</h1> <p id="p-test">It's notify message</p> </div> </body> </html>
id
, DOM-. -test
, id
. Firefox Selenium IDE ( , Selenium IDE HTML-, , ):
project.localhost/tests/selenium-tests/notify-message-test.html
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
[error] Actual value 'rgb(0, 128, 0)' did not match 'green'
[error] Actual value 'rgb(0, 128, 0)' did not match 'green
'
getComputedStyle()
rgb(r,g,b)
. , . , . .
project.localhost/tests/selenium-tests/notify-message-test.html v2
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
, . , , .
project.localhost/tests/html-examples/clear-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1 id="h1-test">Not message</h1> <p id="p-test">It is not message</p> </body> </html>
project.localhost/tests/selenium-tests/clear-test.html
open /tests/html-examples/clear-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
.
– , , .
, ? – . , . CSS , , , . . CSS, , . . .
project.localhost/css/styles.css v2
div.notify-message h1{ color:green; } div.notify-message h1 { font-size: 20px; } div.notify-message p { font-size: 14px; }
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(0, 128, 0)'
, !!! .
div.notify-message
h1
{
color:green;
}
.
CSS TDD
Test Driven Development. , ( , ) web- web- - . ( – , ). , , . , index.html
, , :
project.localhost/index.html v2
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest !</h1> <p>Welcome to our beautiful word!</p> </div> <div class="error-message"> <h1>You are not authorized.</h1> <p>Please login or register now.</p> </div> </body> </html>
“ ”, , , " ", web– :
project.localhost/tests/html-examples/error-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="error-message"> <h1 id="h1-test">Error message</h1> <p id="p-test">It's error message</p> </div> </body> </html>
Selenium IDE :
project.localhost/tests/selenium-tests/error-message-test.html
open /tests/html-examples/error-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value '32px' did not match '20px'
[error] Actual value '16px' did not match '14px'
TDD . CSS.
project.localhost/css/styles.css v3
div.error-message { color:red; } div.notify-message { color:green; } div.notify-message h1, div.error-message h1 { font-size: 20px; } div.notify-message p, div.error-message p { font-size: 14px; }
.
, , . . html-examples
html-. . - html . , – . , .
TDD-, :
, CSS- .
. 20px
, 14px
. . index.html
styles.css
:
project.localhost/index.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest</h1> <p>Welcome to our beautiful world!</p> </div> </body> </html>
project.localhost/css/styles.css
div.notify-message h1 { color:green; font-size: 20px; } div.notify-message p { color:green; font-size: 14px; }
styles.css
. index.html
. , ( -). notify-message-example.html
project.localhost/tests/html-examples/notify-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="notify-message"> <h1 id="h1-test">Notify message</h1> <p id="p-test">It's notify message</p> </div> </body> </html>
id
, DOM-. -test
, id
. Firefox Selenium IDE ( , Selenium IDE HTML-, , ):
project.localhost/tests/selenium-tests/notify-message-test.html
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
[error] Actual value 'rgb(0, 128, 0)' did not match 'green'
[error] Actual value 'rgb(0, 128, 0)' did not match 'green
'
getComputedStyle()
rgb(r,g,b)
. , . , . .
project.localhost/tests/selenium-tests/notify-message-test.html v2
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
, . , , .
project.localhost/tests/html-examples/clear-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1 id="h1-test">Not message</h1> <p id="p-test">It is not message</p> </body> </html>
project.localhost/tests/selenium-tests/clear-test.html
open /tests/html-examples/clear-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
.
– , , .
, ? – . , . CSS , , , . . CSS, , . . .
project.localhost/css/styles.css v2
div.notify-message h1{ color:green; } div.notify-message h1 { font-size: 20px; } div.notify-message p { font-size: 14px; }
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(0, 128, 0)'
, !!! .
div.notify-message
h1
{
color:green;
}
.
CSS TDD
Test Driven Development. , ( , ) web- web- - . ( – , ). , , . , index.html
, , :
project.localhost/index.html v2
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest !</h1> <p>Welcome to our beautiful word!</p> </div> <div class="error-message"> <h1>You are not authorized.</h1> <p>Please login or register now.</p> </div> </body> </html>
“ ”, , , " ", web– :
project.localhost/tests/html-examples/error-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="error-message"> <h1 id="h1-test">Error message</h1> <p id="p-test">It's error message</p> </div> </body> </html>
Selenium IDE :
project.localhost/tests/selenium-tests/error-message-test.html
open /tests/html-examples/error-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value '32px' did not match '20px'
[error] Actual value '16px' did not match '14px'
TDD . CSS.
project.localhost/css/styles.css v3
div.error-message { color:red; } div.notify-message { color:green; } div.notify-message h1, div.error-message h1 { font-size: 20px; } div.notify-message p, div.error-message p { font-size: 14px; }
.
, , . . html-examples
html-. . - html . , – . , .
TDD-, :
, CSS- .
. 20px
, 14px
. . index.html
styles.css
:
project.localhost/index.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest</h1> <p>Welcome to our beautiful world!</p> </div> </body> </html>
project.localhost/css/styles.css
div.notify-message h1 { color:green; font-size: 20px; } div.notify-message p { color:green; font-size: 14px; }
styles.css
. index.html
. , ( -). notify-message-example.html
project.localhost/tests/html-examples/notify-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="notify-message"> <h1 id="h1-test">Notify message</h1> <p id="p-test">It's notify message</p> </div> </body> </html>
id
, DOM-. -test
, id
. Firefox Selenium IDE ( , Selenium IDE HTML-, , ):
project.localhost/tests/selenium-tests/notify-message-test.html
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
[error] Actual value 'rgb(0, 128, 0)' did not match 'green'
[error] Actual value 'rgb(0, 128, 0)' did not match 'green
'
getComputedStyle()
rgb(r,g,b)
. , . , . .
project.localhost/tests/selenium-tests/notify-message-test.html v2
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
, . , , .
project.localhost/tests/html-examples/clear-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1 id="h1-test">Not message</h1> <p id="p-test">It is not message</p> </body> </html>
project.localhost/tests/selenium-tests/clear-test.html
open /tests/html-examples/clear-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
.
– , , .
, ? – . , . CSS , , , . . CSS, , . . .
project.localhost/css/styles.css v2
div.notify-message h1{ color:green; } div.notify-message h1 { font-size: 20px; } div.notify-message p { font-size: 14px; }
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(0, 128, 0)'
, !!! .
div.notify-message
h1
{
color:green;
}
.
CSS TDD
Test Driven Development. , ( , ) web- web- - . ( – , ). , , . , index.html
, , :
project.localhost/index.html v2
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest !</h1> <p>Welcome to our beautiful word!</p> </div> <div class="error-message"> <h1>You are not authorized.</h1> <p>Please login or register now.</p> </div> </body> </html>
“ ”, , , " ", web– :
project.localhost/tests/html-examples/error-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="error-message"> <h1 id="h1-test">Error message</h1> <p id="p-test">It's error message</p> </div> </body> </html>
Selenium IDE :
project.localhost/tests/selenium-tests/error-message-test.html
open /tests/html-examples/error-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value '32px' did not match '20px'
[error] Actual value '16px' did not match '14px'
TDD . CSS.
project.localhost/css/styles.css v3
div.error-message { color:red; } div.notify-message { color:green; } div.notify-message h1, div.error-message h1 { font-size: 20px; } div.notify-message p, div.error-message p { font-size: 14px; }
.
, , . . html-examples
html-. . - html . , – . , .
TDD-, :
, CSS- .
. 20px
, 14px
. . index.html
styles.css
:
project.localhost/index.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest</h1> <p>Welcome to our beautiful world!</p> </div> </body> </html>
project.localhost/css/styles.css
div.notify-message h1 { color:green; font-size: 20px; } div.notify-message p { color:green; font-size: 14px; }
styles.css
. index.html
. , ( -). notify-message-example.html
project.localhost/tests/html-examples/notify-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="notify-message"> <h1 id="h1-test">Notify message</h1> <p id="p-test">It's notify message</p> </div> </body> </html>
id
, DOM-. -test
, id
. Firefox Selenium IDE ( , Selenium IDE HTML-, , ):
project.localhost/tests/selenium-tests/notify-message-test.html
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
[error] Actual value 'rgb(0, 128, 0)' did not match 'green'
[error] Actual value 'rgb(0, 128, 0)' did not match 'green
'
getComputedStyle()
rgb(r,g,b)
. , . , . .
project.localhost/tests/selenium-tests/notify-message-test.html v2
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
, . , , .
project.localhost/tests/html-examples/clear-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1 id="h1-test">Not message</h1> <p id="p-test">It is not message</p> </body> </html>
project.localhost/tests/selenium-tests/clear-test.html
open /tests/html-examples/clear-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
.
– , , .
, ? – . , . CSS , , , . . CSS, , . . .
project.localhost/css/styles.css v2
div.notify-message h1{ color:green; } div.notify-message h1 { font-size: 20px; } div.notify-message p { font-size: 14px; }
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(0, 128, 0)'
, !!! .
div.notify-message
h1
{
color:green;
}
.
CSS TDD
Test Driven Development. , ( , ) web- web- - . ( – , ). , , . , index.html
, , :
project.localhost/index.html v2
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest !</h1> <p>Welcome to our beautiful word!</p> </div> <div class="error-message"> <h1>You are not authorized.</h1> <p>Please login or register now.</p> </div> </body> </html>
“ ”, , , " ", web– :
project.localhost/tests/html-examples/error-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="error-message"> <h1 id="h1-test">Error message</h1> <p id="p-test">It's error message</p> </div> </body> </html>
Selenium IDE :
project.localhost/tests/selenium-tests/error-message-test.html
open /tests/html-examples/error-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value '32px' did not match '20px'
[error] Actual value '16px' did not match '14px'
TDD . CSS.
project.localhost/css/styles.css v3
div.error-message { color:red; } div.notify-message { color:green; } div.notify-message h1, div.error-message h1 { font-size: 20px; } div.notify-message p, div.error-message p { font-size: 14px; }
.
, , . . html-examples
html-. . - html . , – . , .
TDD-, :
, CSS- .
. 20px
, 14px
. . index.html
styles.css
:
project.localhost/index.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest</h1> <p>Welcome to our beautiful world!</p> </div> </body> </html>
project.localhost/css/styles.css
div.notify-message h1 { color:green; font-size: 20px; } div.notify-message p { color:green; font-size: 14px; }
styles.css
. index.html
. , ( -). notify-message-example.html
project.localhost/tests/html-examples/notify-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="notify-message"> <h1 id="h1-test">Notify message</h1> <p id="p-test">It's notify message</p> </div> </body> </html>
id
, DOM-. -test
, id
. Firefox Selenium IDE ( , Selenium IDE HTML-, , ):
project.localhost/tests/selenium-tests/notify-message-test.html
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
[error] Actual value 'rgb(0, 128, 0)' did not match 'green'
[error] Actual value 'rgb(0, 128, 0)' did not match 'green
'
getComputedStyle()
rgb(r,g,b)
. , . , . .
project.localhost/tests/selenium-tests/notify-message-test.html v2
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
, . , , .
project.localhost/tests/html-examples/clear-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1 id="h1-test">Not message</h1> <p id="p-test">It is not message</p> </body> </html>
project.localhost/tests/selenium-tests/clear-test.html
open /tests/html-examples/clear-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
.
– , , .
, ? – . , . CSS , , , . . CSS, , . . .
project.localhost/css/styles.css v2
div.notify-message h1{ color:green; } div.notify-message h1 { font-size: 20px; } div.notify-message p { font-size: 14px; }
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(0, 128, 0)'
, !!! .
div.notify-message
h1
{
color:green;
}
.
CSS TDD
Test Driven Development. , ( , ) web- web- - . ( – , ). , , . , index.html
, , :
project.localhost/index.html v2
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest !</h1> <p>Welcome to our beautiful word!</p> </div> <div class="error-message"> <h1>You are not authorized.</h1> <p>Please login or register now.</p> </div> </body> </html>
“ ”, , , " ", web– :
project.localhost/tests/html-examples/error-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="error-message"> <h1 id="h1-test">Error message</h1> <p id="p-test">It's error message</p> </div> </body> </html>
Selenium IDE :
project.localhost/tests/selenium-tests/error-message-test.html
open /tests/html-examples/error-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value '32px' did not match '20px'
[error] Actual value '16px' did not match '14px'
TDD . CSS.
project.localhost/css/styles.css v3
div.error-message { color:red; } div.notify-message { color:green; } div.notify-message h1, div.error-message h1 { font-size: 20px; } div.notify-message p, div.error-message p { font-size: 14px; }
.
, , . . html-examples
html-. . - html . , – . , .
TDD-, :
, CSS- .
. 20px
, 14px
. . index.html
styles.css
:
project.localhost/index.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest</h1> <p>Welcome to our beautiful world!</p> </div> </body> </html>
project.localhost/css/styles.css
div.notify-message h1 { color:green; font-size: 20px; } div.notify-message p { color:green; font-size: 14px; }
styles.css
. index.html
. , ( -). notify-message-example.html
project.localhost/tests/html-examples/notify-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="notify-message"> <h1 id="h1-test">Notify message</h1> <p id="p-test">It's notify message</p> </div> </body> </html>
id
, DOM-. -test
, id
. Firefox Selenium IDE ( , Selenium IDE HTML-, , ):
project.localhost/tests/selenium-tests/notify-message-test.html
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
[error] Actual value 'rgb(0, 128, 0)' did not match 'green'
[error] Actual value 'rgb(0, 128, 0)' did not match 'green
'
getComputedStyle()
rgb(r,g,b)
. , . , . .
project.localhost/tests/selenium-tests/notify-message-test.html v2
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
, . , , .
project.localhost/tests/html-examples/clear-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1 id="h1-test">Not message</h1> <p id="p-test">It is not message</p> </body> </html>
project.localhost/tests/selenium-tests/clear-test.html
open /tests/html-examples/clear-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
.
– , , .
, ? – . , . CSS , , , . . CSS, , . . .
project.localhost/css/styles.css v2
div.notify-message h1{ color:green; } div.notify-message h1 { font-size: 20px; } div.notify-message p { font-size: 14px; }
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(0, 128, 0)'
, !!! .
div.notify-message
h1
{
color:green;
}
.
CSS TDD
Test Driven Development. , ( , ) web- web- - . ( – , ). , , . , index.html
, , :
project.localhost/index.html v2
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest !</h1> <p>Welcome to our beautiful word!</p> </div> <div class="error-message"> <h1>You are not authorized.</h1> <p>Please login or register now.</p> </div> </body> </html>
“ ”, , , " ", web– :
project.localhost/tests/html-examples/error-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="error-message"> <h1 id="h1-test">Error message</h1> <p id="p-test">It's error message</p> </div> </body> </html>
Selenium IDE :
project.localhost/tests/selenium-tests/error-message-test.html
open /tests/html-examples/error-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value '32px' did not match '20px'
[error] Actual value '16px' did not match '14px'
TDD . CSS.
project.localhost/css/styles.css v3
div.error-message { color:red; } div.notify-message { color:green; } div.notify-message h1, div.error-message h1 { font-size: 20px; } div.notify-message p, div.error-message p { font-size: 14px; }
.
, , . . html-examples
html-. . - html . , – . , .
TDD-, :
, CSS- .
. 20px
, 14px
. . index.html
styles.css
:
project.localhost/index.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest</h1> <p>Welcome to our beautiful world!</p> </div> </body> </html>
project.localhost/css/styles.css
div.notify-message h1 { color:green; font-size: 20px; } div.notify-message p { color:green; font-size: 14px; }
styles.css
. index.html
. , ( -). notify-message-example.html
project.localhost/tests/html-examples/notify-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="notify-message"> <h1 id="h1-test">Notify message</h1> <p id="p-test">It's notify message</p> </div> </body> </html>
id
, DOM-. -test
, id
. Firefox Selenium IDE ( , Selenium IDE HTML-, , ):
project.localhost/tests/selenium-tests/notify-message-test.html
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
[error] Actual value 'rgb(0, 128, 0)' did not match 'green'
[error] Actual value 'rgb(0, 128, 0)' did not match 'green
'
getComputedStyle()
rgb(r,g,b)
. , . , . .
project.localhost/tests/selenium-tests/notify-message-test.html v2
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
, . , , .
project.localhost/tests/html-examples/clear-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1 id="h1-test">Not message</h1> <p id="p-test">It is not message</p> </body> </html>
project.localhost/tests/selenium-tests/clear-test.html
open /tests/html-examples/clear-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
.
– , , .
, ? – . , . CSS , , , . . CSS, , . . .
project.localhost/css/styles.css v2
div.notify-message h1{ color:green; } div.notify-message h1 { font-size: 20px; } div.notify-message p { font-size: 14px; }
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(0, 128, 0)'
, !!! .
div.notify-message
h1
{
color:green;
}
.
CSS TDD
Test Driven Development. , ( , ) web- web- - . ( – , ). , , . , index.html
, , :
project.localhost/index.html v2
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest !</h1> <p>Welcome to our beautiful word!</p> </div> <div class="error-message"> <h1>You are not authorized.</h1> <p>Please login or register now.</p> </div> </body> </html>
“ ”, , , " ", web– :
project.localhost/tests/html-examples/error-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="error-message"> <h1 id="h1-test">Error message</h1> <p id="p-test">It's error message</p> </div> </body> </html>
Selenium IDE :
project.localhost/tests/selenium-tests/error-message-test.html
open /tests/html-examples/error-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value '32px' did not match '20px'
[error] Actual value '16px' did not match '14px'
TDD . CSS.
project.localhost/css/styles.css v3
div.error-message { color:red; } div.notify-message { color:green; } div.notify-message h1, div.error-message h1 { font-size: 20px; } div.notify-message p, div.error-message p { font-size: 14px; }
.
, , . . html-examples
html-. . - html . , – . , .
TDD-, :
, CSS- .
. 20px
, 14px
. . index.html
styles.css
:
project.localhost/index.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest</h1> <p>Welcome to our beautiful world!</p> </div> </body> </html>
project.localhost/css/styles.css
div.notify-message h1 { color:green; font-size: 20px; } div.notify-message p { color:green; font-size: 14px; }
styles.css
. index.html
. , ( -). notify-message-example.html
project.localhost/tests/html-examples/notify-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="notify-message"> <h1 id="h1-test">Notify message</h1> <p id="p-test">It's notify message</p> </div> </body> </html>
id
, DOM-. -test
, id
. Firefox Selenium IDE ( , Selenium IDE HTML-, , ):
project.localhost/tests/selenium-tests/notify-message-test.html
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
[error] Actual value 'rgb(0, 128, 0)' did not match 'green'
[error] Actual value 'rgb(0, 128, 0)' did not match 'green
'
getComputedStyle()
rgb(r,g,b)
. , . , . .
project.localhost/tests/selenium-tests/notify-message-test.html v2
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
, . , , .
project.localhost/tests/html-examples/clear-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1 id="h1-test">Not message</h1> <p id="p-test">It is not message</p> </body> </html>
project.localhost/tests/selenium-tests/clear-test.html
open /tests/html-examples/clear-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
.
– , , .
, ? – . , . CSS , , , . . CSS, , . . .
project.localhost/css/styles.css v2
div.notify-message h1{ color:green; } div.notify-message h1 { font-size: 20px; } div.notify-message p { font-size: 14px; }
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(0, 128, 0)'
, !!! .
div.notify-message
h1
{
color:green;
}
.
CSS TDD
Test Driven Development. , ( , ) web- web- - . ( – , ). , , . , index.html
, , :
project.localhost/index.html v2
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest !</h1> <p>Welcome to our beautiful word!</p> </div> <div class="error-message"> <h1>You are not authorized.</h1> <p>Please login or register now.</p> </div> </body> </html>
“ ”, , , " ", web– :
project.localhost/tests/html-examples/error-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="error-message"> <h1 id="h1-test">Error message</h1> <p id="p-test">It's error message</p> </div> </body> </html>
Selenium IDE :
project.localhost/tests/selenium-tests/error-message-test.html
open /tests/html-examples/error-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value '32px' did not match '20px'
[error] Actual value '16px' did not match '14px'
TDD . CSS.
project.localhost/css/styles.css v3
div.error-message { color:red; } div.notify-message { color:green; } div.notify-message h1, div.error-message h1 { font-size: 20px; } div.notify-message p, div.error-message p { font-size: 14px; }
.
, , . . html-examples
html-. . - html . , – . , .
TDD-, :
, CSS- .
. 20px
, 14px
. . index.html
styles.css
:
project.localhost/index.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest</h1> <p>Welcome to our beautiful world!</p> </div> </body> </html>
project.localhost/css/styles.css
div.notify-message h1 { color:green; font-size: 20px; } div.notify-message p { color:green; font-size: 14px; }
styles.css
. index.html
. , ( -). notify-message-example.html
project.localhost/tests/html-examples/notify-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="notify-message"> <h1 id="h1-test">Notify message</h1> <p id="p-test">It's notify message</p> </div> </body> </html>
id
, DOM-. -test
, id
. Firefox Selenium IDE ( , Selenium IDE HTML-, , ):
project.localhost/tests/selenium-tests/notify-message-test.html
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
[error] Actual value 'rgb(0, 128, 0)' did not match 'green'
[error] Actual value 'rgb(0, 128, 0)' did not match 'green
'
getComputedStyle()
rgb(r,g,b)
. , . , . .
project.localhost/tests/selenium-tests/notify-message-test.html v2
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
, . , , .
project.localhost/tests/html-examples/clear-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1 id="h1-test">Not message</h1> <p id="p-test">It is not message</p> </body> </html>
project.localhost/tests/selenium-tests/clear-test.html
open /tests/html-examples/clear-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
.
– , , .
, ? – . , . CSS , , , . . CSS, , . . .
project.localhost/css/styles.css v2
div.notify-message h1{ color:green; } div.notify-message h1 { font-size: 20px; } div.notify-message p { font-size: 14px; }
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(0, 128, 0)'
, !!! .
div.notify-message
h1
{
color:green;
}
.
CSS TDD
Test Driven Development. , ( , ) web- web- - . ( – , ). , , . , index.html
, , :
project.localhost/index.html v2
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest !</h1> <p>Welcome to our beautiful word!</p> </div> <div class="error-message"> <h1>You are not authorized.</h1> <p>Please login or register now.</p> </div> </body> </html>
“ ”, , , " ", web– :
project.localhost/tests/html-examples/error-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="error-message"> <h1 id="h1-test">Error message</h1> <p id="p-test">It's error message</p> </div> </body> </html>
Selenium IDE :
project.localhost/tests/selenium-tests/error-message-test.html
open /tests/html-examples/error-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value '32px' did not match '20px'
[error] Actual value '16px' did not match '14px'
TDD . CSS.
project.localhost/css/styles.css v3
div.error-message { color:red; } div.notify-message { color:green; } div.notify-message h1, div.error-message h1 { font-size: 20px; } div.notify-message p, div.error-message p { font-size: 14px; }
.
, , . . html-examples
html-. . - html . , – . , .
TDD-, :
, CSS- .
. 20px
, 14px
. . index.html
styles.css
:
project.localhost/index.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest</h1> <p>Welcome to our beautiful world!</p> </div> </body> </html>
project.localhost/css/styles.css
div.notify-message h1 { color:green; font-size: 20px; } div.notify-message p { color:green; font-size: 14px; }
styles.css
. index.html
. , ( -). notify-message-example.html
project.localhost/tests/html-examples/notify-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="notify-message"> <h1 id="h1-test">Notify message</h1> <p id="p-test">It's notify message</p> </div> </body> </html>
id
, DOM-. -test
, id
. Firefox Selenium IDE ( , Selenium IDE HTML-, , ):
project.localhost/tests/selenium-tests/notify-message-test.html
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
[error] Actual value 'rgb(0, 128, 0)' did not match 'green'
[error] Actual value 'rgb(0, 128, 0)' did not match 'green
'
getComputedStyle()
rgb(r,g,b)
. , . , . .
project.localhost/tests/selenium-tests/notify-message-test.html v2
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
, . , , .
project.localhost/tests/html-examples/clear-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1 id="h1-test">Not message</h1> <p id="p-test">It is not message</p> </body> </html>
project.localhost/tests/selenium-tests/clear-test.html
open /tests/html-examples/clear-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
.
– , , .
, ? – . , . CSS , , , . . CSS, , . . .
project.localhost/css/styles.css v2
div.notify-message h1{ color:green; } div.notify-message h1 { font-size: 20px; } div.notify-message p { font-size: 14px; }
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(0, 128, 0)'
, !!! .
div.notify-message
h1
{
color:green;
}
.
CSS TDD
Test Driven Development. , ( , ) web- web- - . ( – , ). , , . , index.html
, , :
project.localhost/index.html v2
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest !</h1> <p>Welcome to our beautiful word!</p> </div> <div class="error-message"> <h1>You are not authorized.</h1> <p>Please login or register now.</p> </div> </body> </html>
“ ”, , , " ", web– :
project.localhost/tests/html-examples/error-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="error-message"> <h1 id="h1-test">Error message</h1> <p id="p-test">It's error message</p> </div> </body> </html>
Selenium IDE :
project.localhost/tests/selenium-tests/error-message-test.html
open /tests/html-examples/error-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value '32px' did not match '20px'
[error] Actual value '16px' did not match '14px'
TDD . CSS.
project.localhost/css/styles.css v3
div.error-message { color:red; } div.notify-message { color:green; } div.notify-message h1, div.error-message h1 { font-size: 20px; } div.notify-message p, div.error-message p { font-size: 14px; }
.
, , . . html-examples
html-. . - html . , – . , .
TDD-, :
, CSS- .
. 20px
, 14px
. . index.html
styles.css
:
project.localhost/index.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest</h1> <p>Welcome to our beautiful world!</p> </div> </body> </html>
project.localhost/css/styles.css
div.notify-message h1 { color:green; font-size: 20px; } div.notify-message p { color:green; font-size: 14px; }
styles.css
. index.html
. , ( -). notify-message-example.html
project.localhost/tests/html-examples/notify-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="notify-message"> <h1 id="h1-test">Notify message</h1> <p id="p-test">It's notify message</p> </div> </body> </html>
id
, DOM-. -test
, id
. Firefox Selenium IDE ( , Selenium IDE HTML-, , ):
project.localhost/tests/selenium-tests/notify-message-test.html
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
[error] Actual value 'rgb(0, 128, 0)' did not match 'green'
[error] Actual value 'rgb(0, 128, 0)' did not match 'green
'
getComputedStyle()
rgb(r,g,b)
. , . , . .
project.localhost/tests/selenium-tests/notify-message-test.html v2
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
, . , , .
project.localhost/tests/html-examples/clear-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1 id="h1-test">Not message</h1> <p id="p-test">It is not message</p> </body> </html>
project.localhost/tests/selenium-tests/clear-test.html
open /tests/html-examples/clear-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
.
– , , .
, ? – . , . CSS , , , . . CSS, , . . .
project.localhost/css/styles.css v2
div.notify-message h1{ color:green; } div.notify-message h1 { font-size: 20px; } div.notify-message p { font-size: 14px; }
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(0, 128, 0)'
, !!! .
div.notify-message
h1
{
color:green;
}
.
CSS TDD
Test Driven Development. , ( , ) web- web- - . ( – , ). , , . , index.html
, , :
project.localhost/index.html v2
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest !</h1> <p>Welcome to our beautiful word!</p> </div> <div class="error-message"> <h1>You are not authorized.</h1> <p>Please login or register now.</p> </div> </body> </html>
“ ”, , , " ", web– :
project.localhost/tests/html-examples/error-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="error-message"> <h1 id="h1-test">Error message</h1> <p id="p-test">It's error message</p> </div> </body> </html>
Selenium IDE :
project.localhost/tests/selenium-tests/error-message-test.html
open /tests/html-examples/error-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value '32px' did not match '20px'
[error] Actual value '16px' did not match '14px'
TDD . CSS.
project.localhost/css/styles.css v3
div.error-message { color:red; } div.notify-message { color:green; } div.notify-message h1, div.error-message h1 { font-size: 20px; } div.notify-message p, div.error-message p { font-size: 14px; }
.
, , . . html-examples
html-. . - html . , – . , .
TDD-, :
, CSS- .
. 20px
, 14px
. . index.html
styles.css
:
project.localhost/index.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest</h1> <p>Welcome to our beautiful world!</p> </div> </body> </html>
project.localhost/css/styles.css
div.notify-message h1 { color:green; font-size: 20px; } div.notify-message p { color:green; font-size: 14px; }
styles.css
. index.html
. , ( -). notify-message-example.html
project.localhost/tests/html-examples/notify-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="notify-message"> <h1 id="h1-test">Notify message</h1> <p id="p-test">It's notify message</p> </div> </body> </html>
id
, DOM-. -test
, id
. Firefox Selenium IDE ( , Selenium IDE HTML-, , ):
project.localhost/tests/selenium-tests/notify-message-test.html
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
[error] Actual value 'rgb(0, 128, 0)' did not match 'green'
[error] Actual value 'rgb(0, 128, 0)' did not match 'green
'
getComputedStyle()
rgb(r,g,b)
. , . , . .
project.localhost/tests/selenium-tests/notify-message-test.html v2
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
, . , , .
project.localhost/tests/html-examples/clear-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1 id="h1-test">Not message</h1> <p id="p-test">It is not message</p> </body> </html>
project.localhost/tests/selenium-tests/clear-test.html
open /tests/html-examples/clear-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
.
– , , .
, ? – . , . CSS , , , . . CSS, , . . .
project.localhost/css/styles.css v2
div.notify-message h1{ color:green; } div.notify-message h1 { font-size: 20px; } div.notify-message p { font-size: 14px; }
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(0, 128, 0)'
, !!! .
div.notify-message
h1
{
color:green;
}
.
CSS TDD
Test Driven Development. , ( , ) web- web- - . ( – , ). , , . , index.html
, , :
project.localhost/index.html v2
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest !</h1> <p>Welcome to our beautiful word!</p> </div> <div class="error-message"> <h1>You are not authorized.</h1> <p>Please login or register now.</p> </div> </body> </html>
“ ”, , , " ", web– :
project.localhost/tests/html-examples/error-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="error-message"> <h1 id="h1-test">Error message</h1> <p id="p-test">It's error message</p> </div> </body> </html>
Selenium IDE :
project.localhost/tests/selenium-tests/error-message-test.html
open /tests/html-examples/error-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value '32px' did not match '20px'
[error] Actual value '16px' did not match '14px'
TDD . CSS.
project.localhost/css/styles.css v3
div.error-message { color:red; } div.notify-message { color:green; } div.notify-message h1, div.error-message h1 { font-size: 20px; } div.notify-message p, div.error-message p { font-size: 14px; }
.
, , . . html-examples
html-. . - html . , – . , .
TDD-, :
, CSS- .
. 20px
, 14px
. . index.html
styles.css
:
project.localhost/index.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest</h1> <p>Welcome to our beautiful world!</p> </div> </body> </html>
project.localhost/css/styles.css
div.notify-message h1 { color:green; font-size: 20px; } div.notify-message p { color:green; font-size: 14px; }
styles.css
. index.html
. , ( -). notify-message-example.html
project.localhost/tests/html-examples/notify-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="notify-message"> <h1 id="h1-test">Notify message</h1> <p id="p-test">It's notify message</p> </div> </body> </html>
id
, DOM-. -test
, id
. Firefox Selenium IDE ( , Selenium IDE HTML-, , ):
project.localhost/tests/selenium-tests/notify-message-test.html
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
[error] Actual value 'rgb(0, 128, 0)' did not match 'green'
[error] Actual value 'rgb(0, 128, 0)' did not match 'green
'
getComputedStyle()
rgb(r,g,b)
. , . , . .
project.localhost/tests/selenium-tests/notify-message-test.html v2
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
, . , , .
project.localhost/tests/html-examples/clear-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1 id="h1-test">Not message</h1> <p id="p-test">It is not message</p> </body> </html>
project.localhost/tests/selenium-tests/clear-test.html
open /tests/html-examples/clear-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
.
– , , .
, ? – . , . CSS , , , . . CSS, , . . .
project.localhost/css/styles.css v2
div.notify-message h1{ color:green; } div.notify-message h1 { font-size: 20px; } div.notify-message p { font-size: 14px; }
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(0, 128, 0)'
, !!! .
div.notify-message
h1
{
color:green;
}
.
CSS TDD
Test Driven Development. , ( , ) web- web- - . ( – , ). , , . , index.html
, , :
project.localhost/index.html v2
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest !</h1> <p>Welcome to our beautiful word!</p> </div> <div class="error-message"> <h1>You are not authorized.</h1> <p>Please login or register now.</p> </div> </body> </html>
“ ”, , , " ", web– :
project.localhost/tests/html-examples/error-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="error-message"> <h1 id="h1-test">Error message</h1> <p id="p-test">It's error message</p> </div> </body> </html>
Selenium IDE :
project.localhost/tests/selenium-tests/error-message-test.html
open /tests/html-examples/error-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value '32px' did not match '20px'
[error] Actual value '16px' did not match '14px'
TDD . CSS.
project.localhost/css/styles.css v3
div.error-message { color:red; } div.notify-message { color:green; } div.notify-message h1, div.error-message h1 { font-size: 20px; } div.notify-message p, div.error-message p { font-size: 14px; }
.
, , . . html-examples
html-. . - html . , – . , .
TDD-, :
, CSS- .
. 20px
, 14px
. . index.html
styles.css
:
project.localhost/index.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest</h1> <p>Welcome to our beautiful world!</p> </div> </body> </html>
project.localhost/css/styles.css
div.notify-message h1 { color:green; font-size: 20px; } div.notify-message p { color:green; font-size: 14px; }
styles.css
. index.html
. , ( -). notify-message-example.html
project.localhost/tests/html-examples/notify-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="notify-message"> <h1 id="h1-test">Notify message</h1> <p id="p-test">It's notify message</p> </div> </body> </html>
id
, DOM-. -test
, id
. Firefox Selenium IDE ( , Selenium IDE HTML-, , ):
project.localhost/tests/selenium-tests/notify-message-test.html
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
[error] Actual value 'rgb(0, 128, 0)' did not match 'green'
[error] Actual value 'rgb(0, 128, 0)' did not match 'green
'
getComputedStyle()
rgb(r,g,b)
. , . , . .
project.localhost/tests/selenium-tests/notify-message-test.html v2
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
, . , , .
project.localhost/tests/html-examples/clear-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1 id="h1-test">Not message</h1> <p id="p-test">It is not message</p> </body> </html>
project.localhost/tests/selenium-tests/clear-test.html
open /tests/html-examples/clear-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
.
– , , .
, ? – . , . CSS , , , . . CSS, , . . .
project.localhost/css/styles.css v2
div.notify-message h1{ color:green; } div.notify-message h1 { font-size: 20px; } div.notify-message p { font-size: 14px; }
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(0, 128, 0)'
, !!! .
div.notify-message
h1
{
color:green;
}
.
CSS TDD
Test Driven Development. , ( , ) web- web- - . ( – , ). , , . , index.html
, , :
project.localhost/index.html v2
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest !</h1> <p>Welcome to our beautiful word!</p> </div> <div class="error-message"> <h1>You are not authorized.</h1> <p>Please login or register now.</p> </div> </body> </html>
“ ”, , , " ", web– :
project.localhost/tests/html-examples/error-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="error-message"> <h1 id="h1-test">Error message</h1> <p id="p-test">It's error message</p> </div> </body> </html>
Selenium IDE :
project.localhost/tests/selenium-tests/error-message-test.html
open /tests/html-examples/error-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value '32px' did not match '20px'
[error] Actual value '16px' did not match '14px'
TDD . CSS.
project.localhost/css/styles.css v3
div.error-message { color:red; } div.notify-message { color:green; } div.notify-message h1, div.error-message h1 { font-size: 20px; } div.notify-message p, div.error-message p { font-size: 14px; }
.
, , . . html-examples
html-. . - html . , – . , .
TDD-, :
, CSS- .
. 20px
, 14px
. . index.html
styles.css
:
project.localhost/index.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest</h1> <p>Welcome to our beautiful world!</p> </div> </body> </html>
project.localhost/css/styles.css
div.notify-message h1 { color:green; font-size: 20px; } div.notify-message p { color:green; font-size: 14px; }
styles.css
. index.html
. , ( -). notify-message-example.html
project.localhost/tests/html-examples/notify-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="notify-message"> <h1 id="h1-test">Notify message</h1> <p id="p-test">It's notify message</p> </div> </body> </html>
id
, DOM-. -test
, id
. Firefox Selenium IDE ( , Selenium IDE HTML-, , ):
project.localhost/tests/selenium-tests/notify-message-test.html
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
[error] Actual value 'rgb(0, 128, 0)' did not match 'green'
[error] Actual value 'rgb(0, 128, 0)' did not match 'green
'
getComputedStyle()
rgb(r,g,b)
. , . , . .
project.localhost/tests/selenium-tests/notify-message-test.html v2
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
, . , , .
project.localhost/tests/html-examples/clear-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1 id="h1-test">Not message</h1> <p id="p-test">It is not message</p> </body> </html>
project.localhost/tests/selenium-tests/clear-test.html
open /tests/html-examples/clear-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
.
– , , .
, ? – . , . CSS , , , . . CSS, , . . .
project.localhost/css/styles.css v2
div.notify-message h1{ color:green; } div.notify-message h1 { font-size: 20px; } div.notify-message p { font-size: 14px; }
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(0, 128, 0)'
, !!! .
div.notify-message
h1
{
color:green;
}
.
CSS TDD
Test Driven Development. , ( , ) web- web- - . ( – , ). , , . , index.html
, , :
project.localhost/index.html v2
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest !</h1> <p>Welcome to our beautiful word!</p> </div> <div class="error-message"> <h1>You are not authorized.</h1> <p>Please login or register now.</p> </div> </body> </html>
“ ”, , , " ", web– :
project.localhost/tests/html-examples/error-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="error-message"> <h1 id="h1-test">Error message</h1> <p id="p-test">It's error message</p> </div> </body> </html>
Selenium IDE :
project.localhost/tests/selenium-tests/error-message-test.html
open /tests/html-examples/error-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value '32px' did not match '20px'
[error] Actual value '16px' did not match '14px'
TDD . CSS.
project.localhost/css/styles.css v3
div.error-message { color:red; } div.notify-message { color:green; } div.notify-message h1, div.error-message h1 { font-size: 20px; } div.notify-message p, div.error-message p { font-size: 14px; }
.
, , . . html-examples
html-. . - html . , – . , .
TDD-, :
, CSS- .
. 20px
, 14px
. . index.html
styles.css
:
project.localhost/index.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest</h1> <p>Welcome to our beautiful world!</p> </div> </body> </html>
project.localhost/css/styles.css
div.notify-message h1 { color:green; font-size: 20px; } div.notify-message p { color:green; font-size: 14px; }
styles.css
. index.html
. , ( -). notify-message-example.html
project.localhost/tests/html-examples/notify-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="notify-message"> <h1 id="h1-test">Notify message</h1> <p id="p-test">It's notify message</p> </div> </body> </html>
id
, DOM-. -test
, id
. Firefox Selenium IDE ( , Selenium IDE HTML-, , ):
project.localhost/tests/selenium-tests/notify-message-test.html
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
[error] Actual value 'rgb(0, 128, 0)' did not match 'green'
[error] Actual value 'rgb(0, 128, 0)' did not match 'green
'
getComputedStyle()
rgb(r,g,b)
. , . , . .
project.localhost/tests/selenium-tests/notify-message-test.html v2
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
, . , , .
project.localhost/tests/html-examples/clear-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1 id="h1-test">Not message</h1> <p id="p-test">It is not message</p> </body> </html>
project.localhost/tests/selenium-tests/clear-test.html
open /tests/html-examples/clear-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
.
– , , .
, ? – . , . CSS , , , . . CSS, , . . .
project.localhost/css/styles.css v2
div.notify-message h1{ color:green; } div.notify-message h1 { font-size: 20px; } div.notify-message p { font-size: 14px; }
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(0, 128, 0)'
, !!! .
div.notify-message
h1
{
color:green;
}
.
CSS TDD
Test Driven Development. , ( , ) web- web- - . ( – , ). , , . , index.html
, , :
project.localhost/index.html v2
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest !</h1> <p>Welcome to our beautiful word!</p> </div> <div class="error-message"> <h1>You are not authorized.</h1> <p>Please login or register now.</p> </div> </body> </html>
“ ”, , , " ", web– :
project.localhost/tests/html-examples/error-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="error-message"> <h1 id="h1-test">Error message</h1> <p id="p-test">It's error message</p> </div> </body> </html>
Selenium IDE :
project.localhost/tests/selenium-tests/error-message-test.html
open /tests/html-examples/error-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value '32px' did not match '20px'
[error] Actual value '16px' did not match '14px'
TDD . CSS.
project.localhost/css/styles.css v3
div.error-message { color:red; } div.notify-message { color:green; } div.notify-message h1, div.error-message h1 { font-size: 20px; } div.notify-message p, div.error-message p { font-size: 14px; }
.
, , . . html-examples
html-. . - html . , – . , .
TDD-, :
, CSS- .
. 20px
, 14px
. . index.html
styles.css
:
project.localhost/index.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest</h1> <p>Welcome to our beautiful world!</p> </div> </body> </html>
project.localhost/css/styles.css
div.notify-message h1 { color:green; font-size: 20px; } div.notify-message p { color:green; font-size: 14px; }
styles.css
. index.html
. , ( -). notify-message-example.html
project.localhost/tests/html-examples/notify-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="notify-message"> <h1 id="h1-test">Notify message</h1> <p id="p-test">It's notify message</p> </div> </body> </html>
id
, DOM-. -test
, id
. Firefox Selenium IDE ( , Selenium IDE HTML-, , ):
project.localhost/tests/selenium-tests/notify-message-test.html
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
[error] Actual value 'rgb(0, 128, 0)' did not match 'green'
[error] Actual value 'rgb(0, 128, 0)' did not match 'green
'
getComputedStyle()
rgb(r,g,b)
. , . , . .
project.localhost/tests/selenium-tests/notify-message-test.html v2
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
, . , , .
project.localhost/tests/html-examples/clear-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1 id="h1-test">Not message</h1> <p id="p-test">It is not message</p> </body> </html>
project.localhost/tests/selenium-tests/clear-test.html
open /tests/html-examples/clear-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
.
– , , .
, ? – . , . CSS , , , . . CSS, , . . .
project.localhost/css/styles.css v2
div.notify-message h1{ color:green; } div.notify-message h1 { font-size: 20px; } div.notify-message p { font-size: 14px; }
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(0, 128, 0)'
, !!! .
div.notify-message
h1
{
color:green;
}
.
CSS TDD
Test Driven Development. , ( , ) web- web- - . ( – , ). , , . , index.html
, , :
project.localhost/index.html v2
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest !</h1> <p>Welcome to our beautiful word!</p> </div> <div class="error-message"> <h1>You are not authorized.</h1> <p>Please login or register now.</p> </div> </body> </html>
“ ”, , , " ", web– :
project.localhost/tests/html-examples/error-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="error-message"> <h1 id="h1-test">Error message</h1> <p id="p-test">It's error message</p> </div> </body> </html>
Selenium IDE :
project.localhost/tests/selenium-tests/error-message-test.html
open /tests/html-examples/error-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value '32px' did not match '20px'
[error] Actual value '16px' did not match '14px'
TDD . CSS.
project.localhost/css/styles.css v3
div.error-message { color:red; } div.notify-message { color:green; } div.notify-message h1, div.error-message h1 { font-size: 20px; } div.notify-message p, div.error-message p { font-size: 14px; }
.
, , . . html-examples
html-. . - html . , – . , .
TDD-, :
, CSS- .
. 20px
, 14px
. . index.html
styles.css
:
project.localhost/index.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest</h1> <p>Welcome to our beautiful world!</p> </div> </body> </html>
project.localhost/css/styles.css
div.notify-message h1 { color:green; font-size: 20px; } div.notify-message p { color:green; font-size: 14px; }
styles.css
. index.html
. , ( -). notify-message-example.html
project.localhost/tests/html-examples/notify-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="notify-message"> <h1 id="h1-test">Notify message</h1> <p id="p-test">It's notify message</p> </div> </body> </html>
id
, DOM-. -test
, id
. Firefox Selenium IDE ( , Selenium IDE HTML-, , ):
project.localhost/tests/selenium-tests/notify-message-test.html
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
[error] Actual value 'rgb(0, 128, 0)' did not match 'green'
[error] Actual value 'rgb(0, 128, 0)' did not match 'green
'
getComputedStyle()
rgb(r,g,b)
. , . , . .
project.localhost/tests/selenium-tests/notify-message-test.html v2
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
, . , , .
project.localhost/tests/html-examples/clear-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1 id="h1-test">Not message</h1> <p id="p-test">It is not message</p> </body> </html>
project.localhost/tests/selenium-tests/clear-test.html
open /tests/html-examples/clear-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
.
– , , .
, ? – . , . CSS , , , . . CSS, , . . .
project.localhost/css/styles.css v2
div.notify-message h1{ color:green; } div.notify-message h1 { font-size: 20px; } div.notify-message p { font-size: 14px; }
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(0, 128, 0)'
, !!! .
div.notify-message
h1
{
color:green;
}
.
CSS TDD
Test Driven Development. , ( , ) web- web- - . ( – , ). , , . , index.html
, , :
project.localhost/index.html v2
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest !</h1> <p>Welcome to our beautiful word!</p> </div> <div class="error-message"> <h1>You are not authorized.</h1> <p>Please login or register now.</p> </div> </body> </html>
“ ”, , , " ", web– :
project.localhost/tests/html-examples/error-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="error-message"> <h1 id="h1-test">Error message</h1> <p id="p-test">It's error message</p> </div> </body> </html>
Selenium IDE :
project.localhost/tests/selenium-tests/error-message-test.html
open /tests/html-examples/error-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value '32px' did not match '20px'
[error] Actual value '16px' did not match '14px'
TDD . CSS.
project.localhost/css/styles.css v3
div.error-message { color:red; } div.notify-message { color:green; } div.notify-message h1, div.error-message h1 { font-size: 20px; } div.notify-message p, div.error-message p { font-size: 14px; }
.
, , . . html-examples
html-. . - html . , – . , .
TDD-, :
, CSS- .
. 20px
, 14px
. . index.html
styles.css
:
project.localhost/index.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest</h1> <p>Welcome to our beautiful world!</p> </div> </body> </html>
project.localhost/css/styles.css
div.notify-message h1 { color:green; font-size: 20px; } div.notify-message p { color:green; font-size: 14px; }
styles.css
. index.html
. , ( -). notify-message-example.html
project.localhost/tests/html-examples/notify-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="notify-message"> <h1 id="h1-test">Notify message</h1> <p id="p-test">It's notify message</p> </div> </body> </html>
id
, DOM-. -test
, id
. Firefox Selenium IDE ( , Selenium IDE HTML-, , ):
project.localhost/tests/selenium-tests/notify-message-test.html
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
[error] Actual value 'rgb(0, 128, 0)' did not match 'green'
[error] Actual value 'rgb(0, 128, 0)' did not match 'green
'
getComputedStyle()
rgb(r,g,b)
. , . , . .
project.localhost/tests/selenium-tests/notify-message-test.html v2
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
, . , , .
project.localhost/tests/html-examples/clear-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1 id="h1-test">Not message</h1> <p id="p-test">It is not message</p> </body> </html>
project.localhost/tests/selenium-tests/clear-test.html
open /tests/html-examples/clear-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
.
– , , .
, ? – . , . CSS , , , . . CSS, , . . .
project.localhost/css/styles.css v2
div.notify-message h1{ color:green; } div.notify-message h1 { font-size: 20px; } div.notify-message p { font-size: 14px; }
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(0, 128, 0)'
, !!! .
div.notify-message
h1
{
color:green;
}
.
CSS TDD
Test Driven Development. , ( , ) web- web- - . ( – , ). , , . , index.html
, , :
project.localhost/index.html v2
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest !</h1> <p>Welcome to our beautiful word!</p> </div> <div class="error-message"> <h1>You are not authorized.</h1> <p>Please login or register now.</p> </div> </body> </html>
“ ”, , , " ", web– :
project.localhost/tests/html-examples/error-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="error-message"> <h1 id="h1-test">Error message</h1> <p id="p-test">It's error message</p> </div> </body> </html>
Selenium IDE :
project.localhost/tests/selenium-tests/error-message-test.html
open /tests/html-examples/error-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value '32px' did not match '20px'
[error] Actual value '16px' did not match '14px'
TDD . CSS.
project.localhost/css/styles.css v3
div.error-message { color:red; } div.notify-message { color:green; } div.notify-message h1, div.error-message h1 { font-size: 20px; } div.notify-message p, div.error-message p { font-size: 14px; }
.
, , . . html-examples
html-. . - html . , – . , .
TDD-, :
, CSS- .
. 20px
, 14px
. . index.html
styles.css
:
project.localhost/index.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest</h1> <p>Welcome to our beautiful world!</p> </div> </body> </html>
project.localhost/css/styles.css
div.notify-message h1 { color:green; font-size: 20px; } div.notify-message p { color:green; font-size: 14px; }
styles.css
. index.html
. , ( -). notify-message-example.html
project.localhost/tests/html-examples/notify-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="notify-message"> <h1 id="h1-test">Notify message</h1> <p id="p-test">It's notify message</p> </div> </body> </html>
id
, DOM-. -test
, id
. Firefox Selenium IDE ( , Selenium IDE HTML-, , ):
project.localhost/tests/selenium-tests/notify-message-test.html
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
[error] Actual value 'rgb(0, 128, 0)' did not match 'green'
[error] Actual value 'rgb(0, 128, 0)' did not match 'green
'
getComputedStyle()
rgb(r,g,b)
. , . , . .
project.localhost/tests/selenium-tests/notify-message-test.html v2
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
, . , , .
project.localhost/tests/html-examples/clear-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1 id="h1-test">Not message</h1> <p id="p-test">It is not message</p> </body> </html>
project.localhost/tests/selenium-tests/clear-test.html
open /tests/html-examples/clear-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
.
– , , .
, ? – . , . CSS , , , . . CSS, , . . .
project.localhost/css/styles.css v2
div.notify-message h1{ color:green; } div.notify-message h1 { font-size: 20px; } div.notify-message p { font-size: 14px; }
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(0, 128, 0)'
, !!! .
div.notify-message
h1
{
color:green;
}
.
CSS TDD
Test Driven Development. , ( , ) web- web- - . ( – , ). , , . , index.html
, , :
project.localhost/index.html v2
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest !</h1> <p>Welcome to our beautiful word!</p> </div> <div class="error-message"> <h1>You are not authorized.</h1> <p>Please login or register now.</p> </div> </body> </html>
“ ”, , , " ", web– :
project.localhost/tests/html-examples/error-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="error-message"> <h1 id="h1-test">Error message</h1> <p id="p-test">It's error message</p> </div> </body> </html>
Selenium IDE :
project.localhost/tests/selenium-tests/error-message-test.html
open /tests/html-examples/error-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value '32px' did not match '20px'
[error] Actual value '16px' did not match '14px'
TDD . CSS.
project.localhost/css/styles.css v3
div.error-message { color:red; } div.notify-message { color:green; } div.notify-message h1, div.error-message h1 { font-size: 20px; } div.notify-message p, div.error-message p { font-size: 14px; }
.
, , . . html-examples
html-. . - html . , – . , .
TDD-, :
, CSS- .
. 20px
, 14px
. . index.html
styles.css
:
project.localhost/index.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest</h1> <p>Welcome to our beautiful world!</p> </div> </body> </html>
project.localhost/css/styles.css
div.notify-message h1 { color:green; font-size: 20px; } div.notify-message p { color:green; font-size: 14px; }
styles.css
. index.html
. , ( -). notify-message-example.html
project.localhost/tests/html-examples/notify-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="notify-message"> <h1 id="h1-test">Notify message</h1> <p id="p-test">It's notify message</p> </div> </body> </html>
id
, DOM-. -test
, id
. Firefox Selenium IDE ( , Selenium IDE HTML-, , ):
project.localhost/tests/selenium-tests/notify-message-test.html
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
[error] Actual value 'rgb(0, 128, 0)' did not match 'green'
[error] Actual value 'rgb(0, 128, 0)' did not match 'green
'
getComputedStyle()
rgb(r,g,b)
. , . , . .
project.localhost/tests/selenium-tests/notify-message-test.html v2
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
, . , , .
project.localhost/tests/html-examples/clear-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1 id="h1-test">Not message</h1> <p id="p-test">It is not message</p> </body> </html>
project.localhost/tests/selenium-tests/clear-test.html
open /tests/html-examples/clear-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
.
– , , .
, ? – . , . CSS , , , . . CSS, , . . .
project.localhost/css/styles.css v2
div.notify-message h1{ color:green; } div.notify-message h1 { font-size: 20px; } div.notify-message p { font-size: 14px; }
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(0, 128, 0)'
, !!! .
div.notify-message
h1
{
color:green;
}
.
CSS TDD
Test Driven Development. , ( , ) web- web- - . ( – , ). , , . , index.html
, , :
project.localhost/index.html v2
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest !</h1> <p>Welcome to our beautiful word!</p> </div> <div class="error-message"> <h1>You are not authorized.</h1> <p>Please login or register now.</p> </div> </body> </html>
“ ”, , , " ", web– :
project.localhost/tests/html-examples/error-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="error-message"> <h1 id="h1-test">Error message</h1> <p id="p-test">It's error message</p> </div> </body> </html>
Selenium IDE :
project.localhost/tests/selenium-tests/error-message-test.html
open /tests/html-examples/error-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value '32px' did not match '20px'
[error] Actual value '16px' did not match '14px'
TDD . CSS.
project.localhost/css/styles.css v3
div.error-message { color:red; } div.notify-message { color:green; } div.notify-message h1, div.error-message h1 { font-size: 20px; } div.notify-message p, div.error-message p { font-size: 14px; }
.
, , . . html-examples
html-. . - html . , – . , .
TDD-, :
, CSS- .
. 20px
, 14px
. . index.html
styles.css
:
project.localhost/index.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest</h1> <p>Welcome to our beautiful world!</p> </div> </body> </html>
project.localhost/css/styles.css
div.notify-message h1 { color:green; font-size: 20px; } div.notify-message p { color:green; font-size: 14px; }
styles.css
. index.html
. , ( -). notify-message-example.html
project.localhost/tests/html-examples/notify-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="notify-message"> <h1 id="h1-test">Notify message</h1> <p id="p-test">It's notify message</p> </div> </body> </html>
id
, DOM-. -test
, id
. Firefox Selenium IDE ( , Selenium IDE HTML-, , ):
project.localhost/tests/selenium-tests/notify-message-test.html
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
[error] Actual value 'rgb(0, 128, 0)' did not match 'green'
[error] Actual value 'rgb(0, 128, 0)' did not match 'green
'
getComputedStyle()
rgb(r,g,b)
. , . , . .
project.localhost/tests/selenium-tests/notify-message-test.html v2
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
, . , , .
project.localhost/tests/html-examples/clear-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1 id="h1-test">Not message</h1> <p id="p-test">It is not message</p> </body> </html>
project.localhost/tests/selenium-tests/clear-test.html
open /tests/html-examples/clear-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
.
– , , .
, ? – . , . CSS , , , . . CSS, , . . .
project.localhost/css/styles.css v2
div.notify-message h1{ color:green; } div.notify-message h1 { font-size: 20px; } div.notify-message p { font-size: 14px; }
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(0, 128, 0)'
, !!! .
div.notify-message
h1
{
color:green;
}
.
CSS TDD
Test Driven Development. , ( , ) web- web- - . ( – , ). , , . , index.html
, , :
project.localhost/index.html v2
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest !</h1> <p>Welcome to our beautiful word!</p> </div> <div class="error-message"> <h1>You are not authorized.</h1> <p>Please login or register now.</p> </div> </body> </html>
“ ”, , , " ", web– :
project.localhost/tests/html-examples/error-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="error-message"> <h1 id="h1-test">Error message</h1> <p id="p-test">It's error message</p> </div> </body> </html>
Selenium IDE :
project.localhost/tests/selenium-tests/error-message-test.html
open /tests/html-examples/error-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value '32px' did not match '20px'
[error] Actual value '16px' did not match '14px'
TDD . CSS.
project.localhost/css/styles.css v3
div.error-message { color:red; } div.notify-message { color:green; } div.notify-message h1, div.error-message h1 { font-size: 20px; } div.notify-message p, div.error-message p { font-size: 14px; }
.
, , . . html-examples
html-. . - html . , – . , .
TDD-, :
, CSS- .
. 20px
, 14px
. . index.html
styles.css
:
project.localhost/index.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest</h1> <p>Welcome to our beautiful world!</p> </div> </body> </html>
project.localhost/css/styles.css
div.notify-message h1 { color:green; font-size: 20px; } div.notify-message p { color:green; font-size: 14px; }
styles.css
. index.html
. , ( -). notify-message-example.html
project.localhost/tests/html-examples/notify-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="notify-message"> <h1 id="h1-test">Notify message</h1> <p id="p-test">It's notify message</p> </div> </body> </html>
id
, DOM-. -test
, id
. Firefox Selenium IDE ( , Selenium IDE HTML-, , ):
project.localhost/tests/selenium-tests/notify-message-test.html
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
[error] Actual value 'rgb(0, 128, 0)' did not match 'green'
[error] Actual value 'rgb(0, 128, 0)' did not match 'green
'
getComputedStyle()
rgb(r,g,b)
. , . , . .
project.localhost/tests/selenium-tests/notify-message-test.html v2
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
, . , , .
project.localhost/tests/html-examples/clear-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1 id="h1-test">Not message</h1> <p id="p-test">It is not message</p> </body> </html>
project.localhost/tests/selenium-tests/clear-test.html
open /tests/html-examples/clear-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
.
– , , .
, ? – . , . CSS , , , . . CSS, , . . .
project.localhost/css/styles.css v2
div.notify-message h1{ color:green; } div.notify-message h1 { font-size: 20px; } div.notify-message p { font-size: 14px; }
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(0, 128, 0)'
, !!! .
div.notify-message
h1
{
color:green;
}
.
CSS TDD
Test Driven Development. , ( , ) web- web- - . ( – , ). , , . , index.html
, , :
project.localhost/index.html v2
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest !</h1> <p>Welcome to our beautiful word!</p> </div> <div class="error-message"> <h1>You are not authorized.</h1> <p>Please login or register now.</p> </div> </body> </html>
“ ”, , , " ", web– :
project.localhost/tests/html-examples/error-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="error-message"> <h1 id="h1-test">Error message</h1> <p id="p-test">It's error message</p> </div> </body> </html>
Selenium IDE :
project.localhost/tests/selenium-tests/error-message-test.html
open /tests/html-examples/error-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value '32px' did not match '20px'
[error] Actual value '16px' did not match '14px'
TDD . CSS.
project.localhost/css/styles.css v3
div.error-message { color:red; } div.notify-message { color:green; } div.notify-message h1, div.error-message h1 { font-size: 20px; } div.notify-message p, div.error-message p { font-size: 14px; }
.
, , . . html-examples
html-. . - html . , – . , .
TDD-, :
, CSS- .
. 20px
, 14px
. . index.html
styles.css
:
project.localhost/index.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest</h1> <p>Welcome to our beautiful world!</p> </div> </body> </html>
project.localhost/css/styles.css
div.notify-message h1 { color:green; font-size: 20px; } div.notify-message p { color:green; font-size: 14px; }
styles.css
. index.html
. , ( -). notify-message-example.html
project.localhost/tests/html-examples/notify-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="notify-message"> <h1 id="h1-test">Notify message</h1> <p id="p-test">It's notify message</p> </div> </body> </html>
id
, DOM-. -test
, id
. Firefox Selenium IDE ( , Selenium IDE HTML-, , ):
project.localhost/tests/selenium-tests/notify-message-test.html
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
[error] Actual value 'rgb(0, 128, 0)' did not match 'green'
[error] Actual value 'rgb(0, 128, 0)' did not match 'green
'
getComputedStyle()
rgb(r,g,b)
. , . , . .
project.localhost/tests/selenium-tests/notify-message-test.html v2
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
, . , , .
project.localhost/tests/html-examples/clear-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1 id="h1-test">Not message</h1> <p id="p-test">It is not message</p> </body> </html>
project.localhost/tests/selenium-tests/clear-test.html
open /tests/html-examples/clear-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
.
– , , .
, ? – . , . CSS , , , . . CSS, , . . .
project.localhost/css/styles.css v2
div.notify-message h1{ color:green; } div.notify-message h1 { font-size: 20px; } div.notify-message p { font-size: 14px; }
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(0, 128, 0)'
, !!! .
div.notify-message
h1
{
color:green;
}
.
CSS TDD
Test Driven Development. , ( , ) web- web- - . ( – , ). , , . , index.html
, , :
project.localhost/index.html v2
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest !</h1> <p>Welcome to our beautiful word!</p> </div> <div class="error-message"> <h1>You are not authorized.</h1> <p>Please login or register now.</p> </div> </body> </html>
“ ”, , , " ", web– :
project.localhost/tests/html-examples/error-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="error-message"> <h1 id="h1-test">Error message</h1> <p id="p-test">It's error message</p> </div> </body> </html>
Selenium IDE :
project.localhost/tests/selenium-tests/error-message-test.html
open /tests/html-examples/error-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value '32px' did not match '20px'
[error] Actual value '16px' did not match '14px'
TDD . CSS.
project.localhost/css/styles.css v3
div.error-message { color:red; } div.notify-message { color:green; } div.notify-message h1, div.error-message h1 { font-size: 20px; } div.notify-message p, div.error-message p { font-size: 14px; }
.
, , . . html-examples
html-. . - html . , – . , .
TDD-, :
, CSS- .
. 20px
, 14px
. . index.html
styles.css
:
project.localhost/index.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest</h1> <p>Welcome to our beautiful world!</p> </div> </body> </html>
project.localhost/css/styles.css
div.notify-message h1 { color:green; font-size: 20px; } div.notify-message p { color:green; font-size: 14px; }
styles.css
. index.html
. , ( -). notify-message-example.html
project.localhost/tests/html-examples/notify-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="notify-message"> <h1 id="h1-test">Notify message</h1> <p id="p-test">It's notify message</p> </div> </body> </html>
id
, DOM-. -test
, id
. Firefox Selenium IDE ( , Selenium IDE HTML-, , ):
project.localhost/tests/selenium-tests/notify-message-test.html
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
[error] Actual value 'rgb(0, 128, 0)' did not match 'green'
[error] Actual value 'rgb(0, 128, 0)' did not match 'green
'
getComputedStyle()
rgb(r,g,b)
. , . , . .
project.localhost/tests/selenium-tests/notify-message-test.html v2
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
, . , , .
project.localhost/tests/html-examples/clear-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1 id="h1-test">Not message</h1> <p id="p-test">It is not message</p> </body> </html>
project.localhost/tests/selenium-tests/clear-test.html
open /tests/html-examples/clear-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
.
– , , .
, ? – . , . CSS , , , . . CSS, , . . .
project.localhost/css/styles.css v2
div.notify-message h1{ color:green; } div.notify-message h1 { font-size: 20px; } div.notify-message p { font-size: 14px; }
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(0, 128, 0)'
, !!! .
div.notify-message
h1
{
color:green;
}
.
CSS TDD
Test Driven Development. , ( , ) web- web- - . ( – , ). , , . , index.html
, , :
project.localhost/index.html v2
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest !</h1> <p>Welcome to our beautiful word!</p> </div> <div class="error-message"> <h1>You are not authorized.</h1> <p>Please login or register now.</p> </div> </body> </html>
“ ”, , , " ", web– :
project.localhost/tests/html-examples/error-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="error-message"> <h1 id="h1-test">Error message</h1> <p id="p-test">It's error message</p> </div> </body> </html>
Selenium IDE :
project.localhost/tests/selenium-tests/error-message-test.html
open /tests/html-examples/error-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value '32px' did not match '20px'
[error] Actual value '16px' did not match '14px'
TDD . CSS.
project.localhost/css/styles.css v3
div.error-message { color:red; } div.notify-message { color:green; } div.notify-message h1, div.error-message h1 { font-size: 20px; } div.notify-message p, div.error-message p { font-size: 14px; }
.
, , . . html-examples
html-. . - html . , – . , .
TDD-, :
, CSS- .
. 20px
, 14px
. . index.html
styles.css
:
project.localhost/index.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest</h1> <p>Welcome to our beautiful world!</p> </div> </body> </html>
project.localhost/css/styles.css
div.notify-message h1 { color:green; font-size: 20px; } div.notify-message p { color:green; font-size: 14px; }
styles.css
. index.html
. , ( -). notify-message-example.html
project.localhost/tests/html-examples/notify-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="notify-message"> <h1 id="h1-test">Notify message</h1> <p id="p-test">It's notify message</p> </div> </body> </html>
id
, DOM-. -test
, id
. Firefox Selenium IDE ( , Selenium IDE HTML-, , ):
project.localhost/tests/selenium-tests/notify-message-test.html
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
[error] Actual value 'rgb(0, 128, 0)' did not match 'green'
[error] Actual value 'rgb(0, 128, 0)' did not match 'green
'
getComputedStyle()
rgb(r,g,b)
. , . , . .
project.localhost/tests/selenium-tests/notify-message-test.html v2
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
, . , , .
project.localhost/tests/html-examples/clear-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1 id="h1-test">Not message</h1> <p id="p-test">It is not message</p> </body> </html>
project.localhost/tests/selenium-tests/clear-test.html
open /tests/html-examples/clear-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
.
– , , .
, ? – . , . CSS , , , . . CSS, , . . .
project.localhost/css/styles.css v2
div.notify-message h1{ color:green; } div.notify-message h1 { font-size: 20px; } div.notify-message p { font-size: 14px; }
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(0, 128, 0)'
, !!! .
div.notify-message
h1
{
color:green;
}
.
CSS TDD
Test Driven Development. , ( , ) web- web- - . ( – , ). , , . , index.html
, , :
project.localhost/index.html v2
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest !</h1> <p>Welcome to our beautiful word!</p> </div> <div class="error-message"> <h1>You are not authorized.</h1> <p>Please login or register now.</p> </div> </body> </html>
“ ”, , , " ", web– :
project.localhost/tests/html-examples/error-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="error-message"> <h1 id="h1-test">Error message</h1> <p id="p-test">It's error message</p> </div> </body> </html>
Selenium IDE :
project.localhost/tests/selenium-tests/error-message-test.html
open /tests/html-examples/error-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value '32px' did not match '20px'
[error] Actual value '16px' did not match '14px'
TDD . CSS.
project.localhost/css/styles.css v3
div.error-message { color:red; } div.notify-message { color:green; } div.notify-message h1, div.error-message h1 { font-size: 20px; } div.notify-message p, div.error-message p { font-size: 14px; }
.
, , . . html-examples
html-. . - html . , – . , .
TDD-, :
, CSS- .
. 20px
, 14px
. . index.html
styles.css
:
project.localhost/index.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest</h1> <p>Welcome to our beautiful world!</p> </div> </body> </html>
project.localhost/css/styles.css
div.notify-message h1 { color:green; font-size: 20px; } div.notify-message p { color:green; font-size: 14px; }
styles.css
. index.html
. , ( -). notify-message-example.html
project.localhost/tests/html-examples/notify-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="notify-message"> <h1 id="h1-test">Notify message</h1> <p id="p-test">It's notify message</p> </div> </body> </html>
id
, DOM-. -test
, id
. Firefox Selenium IDE ( , Selenium IDE HTML-, , ):
project.localhost/tests/selenium-tests/notify-message-test.html
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
[error] Actual value 'rgb(0, 128, 0)' did not match 'green'
[error] Actual value 'rgb(0, 128, 0)' did not match 'green
'
getComputedStyle()
rgb(r,g,b)
. , . , . .
project.localhost/tests/selenium-tests/notify-message-test.html v2
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
, . , , .
project.localhost/tests/html-examples/clear-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1 id="h1-test">Not message</h1> <p id="p-test">It is not message</p> </body> </html>
project.localhost/tests/selenium-tests/clear-test.html
open /tests/html-examples/clear-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
.
– , , .
, ? – . , . CSS , , , . . CSS, , . . .
project.localhost/css/styles.css v2
div.notify-message h1{ color:green; } div.notify-message h1 { font-size: 20px; } div.notify-message p { font-size: 14px; }
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(0, 128, 0)'
, !!! .
div.notify-message
h1
{
color:green;
}
.
CSS TDD
Test Driven Development. , ( , ) web- web- - . ( – , ). , , . , index.html
, , :
project.localhost/index.html v2
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest !</h1> <p>Welcome to our beautiful word!</p> </div> <div class="error-message"> <h1>You are not authorized.</h1> <p>Please login or register now.</p> </div> </body> </html>
“ ”, , , " ", web– :
project.localhost/tests/html-examples/error-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="error-message"> <h1 id="h1-test">Error message</h1> <p id="p-test">It's error message</p> </div> </body> </html>
Selenium IDE :
project.localhost/tests/selenium-tests/error-message-test.html
open /tests/html-examples/error-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value '32px' did not match '20px'
[error] Actual value '16px' did not match '14px'
TDD . CSS.
project.localhost/css/styles.css v3
div.error-message { color:red; } div.notify-message { color:green; } div.notify-message h1, div.error-message h1 { font-size: 20px; } div.notify-message p, div.error-message p { font-size: 14px; }
.
, , . . html-examples
html-. . - html . , – . , .
TDD-, :
, CSS- .
. 20px
, 14px
. . index.html
styles.css
:
project.localhost/index.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest</h1> <p>Welcome to our beautiful world!</p> </div> </body> </html>
project.localhost/css/styles.css
div.notify-message h1 { color:green; font-size: 20px; } div.notify-message p { color:green; font-size: 14px; }
styles.css
. index.html
. , ( -). notify-message-example.html
project.localhost/tests/html-examples/notify-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="notify-message"> <h1 id="h1-test">Notify message</h1> <p id="p-test">It's notify message</p> </div> </body> </html>
id
, DOM-. -test
, id
. Firefox Selenium IDE ( , Selenium IDE HTML-, , ):
project.localhost/tests/selenium-tests/notify-message-test.html
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
[error] Actual value 'rgb(0, 128, 0)' did not match 'green'
[error] Actual value 'rgb(0, 128, 0)' did not match 'green
'
getComputedStyle()
rgb(r,g,b)
. , . , . .
project.localhost/tests/selenium-tests/notify-message-test.html v2
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
, . , , .
project.localhost/tests/html-examples/clear-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1 id="h1-test">Not message</h1> <p id="p-test">It is not message</p> </body> </html>
project.localhost/tests/selenium-tests/clear-test.html
open /tests/html-examples/clear-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
.
– , , .
, ? – . , . CSS , , , . . CSS, , . . .
project.localhost/css/styles.css v2
div.notify-message h1{ color:green; } div.notify-message h1 { font-size: 20px; } div.notify-message p { font-size: 14px; }
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(0, 128, 0)'
, !!! .
div.notify-message
h1
{
color:green;
}
.
CSS TDD
Test Driven Development. , ( , ) web- web- - . ( – , ). , , . , index.html
, , :
project.localhost/index.html v2
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest !</h1> <p>Welcome to our beautiful word!</p> </div> <div class="error-message"> <h1>You are not authorized.</h1> <p>Please login or register now.</p> </div> </body> </html>
“ ”, , , " ", web– :
project.localhost/tests/html-examples/error-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="error-message"> <h1 id="h1-test">Error message</h1> <p id="p-test">It's error message</p> </div> </body> </html>
Selenium IDE :
project.localhost/tests/selenium-tests/error-message-test.html
open /tests/html-examples/error-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value '32px' did not match '20px'
[error] Actual value '16px' did not match '14px'
TDD . CSS.
project.localhost/css/styles.css v3
div.error-message { color:red; } div.notify-message { color:green; } div.notify-message h1, div.error-message h1 { font-size: 20px; } div.notify-message p, div.error-message p { font-size: 14px; }
.
, , . . html-examples
html-. . - html . , – . , .
TDD-, :
, CSS- .
. 20px
, 14px
. . index.html
styles.css
:
project.localhost/index.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest</h1> <p>Welcome to our beautiful world!</p> </div> </body> </html>
project.localhost/css/styles.css
div.notify-message h1 { color:green; font-size: 20px; } div.notify-message p { color:green; font-size: 14px; }
styles.css
. index.html
. , ( -). notify-message-example.html
project.localhost/tests/html-examples/notify-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="notify-message"> <h1 id="h1-test">Notify message</h1> <p id="p-test">It's notify message</p> </div> </body> </html>
id
, DOM-. -test
, id
. Firefox Selenium IDE ( , Selenium IDE HTML-, , ):
project.localhost/tests/selenium-tests/notify-message-test.html
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
[error] Actual value 'rgb(0, 128, 0)' did not match 'green'
[error] Actual value 'rgb(0, 128, 0)' did not match 'green
'
getComputedStyle()
rgb(r,g,b)
. , . , . .
project.localhost/tests/selenium-tests/notify-message-test.html v2
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
, . , , .
project.localhost/tests/html-examples/clear-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1 id="h1-test">Not message</h1> <p id="p-test">It is not message</p> </body> </html>
project.localhost/tests/selenium-tests/clear-test.html
open /tests/html-examples/clear-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
.
– , , .
, ? – . , . CSS , , , . . CSS, , . . .
project.localhost/css/styles.css v2
div.notify-message h1{ color:green; } div.notify-message h1 { font-size: 20px; } div.notify-message p { font-size: 14px; }
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(0, 128, 0)'
, !!! .
div.notify-message
h1
{
color:green;
}
.
CSS TDD
Test Driven Development. , ( , ) web- web- - . ( – , ). , , . , index.html
, , :
project.localhost/index.html v2
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest !</h1> <p>Welcome to our beautiful word!</p> </div> <div class="error-message"> <h1>You are not authorized.</h1> <p>Please login or register now.</p> </div> </body> </html>
“ ”, , , " ", web– :
project.localhost/tests/html-examples/error-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="error-message"> <h1 id="h1-test">Error message</h1> <p id="p-test">It's error message</p> </div> </body> </html>
Selenium IDE :
project.localhost/tests/selenium-tests/error-message-test.html
open /tests/html-examples/error-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value '32px' did not match '20px'
[error] Actual value '16px' did not match '14px'
TDD . CSS.
project.localhost/css/styles.css v3
div.error-message { color:red; } div.notify-message { color:green; } div.notify-message h1, div.error-message h1 { font-size: 20px; } div.notify-message p, div.error-message p { font-size: 14px; }
.
, , . . html-examples
html-. . - html . , – . , .
TDD-, :
, CSS- .
. 20px
, 14px
. . index.html
styles.css
:
project.localhost/index.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest</h1> <p>Welcome to our beautiful world!</p> </div> </body> </html>
project.localhost/css/styles.css
div.notify-message h1 { color:green; font-size: 20px; } div.notify-message p { color:green; font-size: 14px; }
styles.css
. index.html
. , ( -). notify-message-example.html
project.localhost/tests/html-examples/notify-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="notify-message"> <h1 id="h1-test">Notify message</h1> <p id="p-test">It's notify message</p> </div> </body> </html>
id
, DOM-. -test
, id
. Firefox Selenium IDE ( , Selenium IDE HTML-, , ):
project.localhost/tests/selenium-tests/notify-message-test.html
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
[error] Actual value 'rgb(0, 128, 0)' did not match 'green'
[error] Actual value 'rgb(0, 128, 0)' did not match 'green
'
getComputedStyle()
rgb(r,g,b)
. , . , . .
project.localhost/tests/selenium-tests/notify-message-test.html v2
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
, . , , .
project.localhost/tests/html-examples/clear-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1 id="h1-test">Not message</h1> <p id="p-test">It is not message</p> </body> </html>
project.localhost/tests/selenium-tests/clear-test.html
open /tests/html-examples/clear-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
.
– , , .
, ? – . , . CSS , , , . . CSS, , . . .
project.localhost/css/styles.css v2
div.notify-message h1{ color:green; } div.notify-message h1 { font-size: 20px; } div.notify-message p { font-size: 14px; }
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(0, 128, 0)'
, !!! .
div.notify-message
h1
{
color:green;
}
.
CSS TDD
Test Driven Development. , ( , ) web- web- - . ( – , ). , , . , index.html
, , :
project.localhost/index.html v2
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest !</h1> <p>Welcome to our beautiful word!</p> </div> <div class="error-message"> <h1>You are not authorized.</h1> <p>Please login or register now.</p> </div> </body> </html>
“ ”, , , " ", web– :
project.localhost/tests/html-examples/error-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="error-message"> <h1 id="h1-test">Error message</h1> <p id="p-test">It's error message</p> </div> </body> </html>
Selenium IDE :
project.localhost/tests/selenium-tests/error-message-test.html
open /tests/html-examples/error-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value '32px' did not match '20px'
[error] Actual value '16px' did not match '14px'
TDD . CSS.
project.localhost/css/styles.css v3
div.error-message { color:red; } div.notify-message { color:green; } div.notify-message h1, div.error-message h1 { font-size: 20px; } div.notify-message p, div.error-message p { font-size: 14px; }
.
, , . . html-examples
html-. . - html . , – . , .
TDD-, :
, CSS- .
. 20px
, 14px
. . index.html
styles.css
:
project.localhost/index.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest</h1> <p>Welcome to our beautiful world!</p> </div> </body> </html>
project.localhost/css/styles.css
div.notify-message h1 { color:green; font-size: 20px; } div.notify-message p { color:green; font-size: 14px; }
styles.css
. index.html
. , ( -). notify-message-example.html
project.localhost/tests/html-examples/notify-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="notify-message"> <h1 id="h1-test">Notify message</h1> <p id="p-test">It's notify message</p> </div> </body> </html>
id
, DOM-. -test
, id
. Firefox Selenium IDE ( , Selenium IDE HTML-, , ):
project.localhost/tests/selenium-tests/notify-message-test.html
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
[error] Actual value 'rgb(0, 128, 0)' did not match 'green'
[error] Actual value 'rgb(0, 128, 0)' did not match 'green
'
getComputedStyle()
rgb(r,g,b)
. , . , . .
project.localhost/tests/selenium-tests/notify-message-test.html v2
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
, . , , .
project.localhost/tests/html-examples/clear-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1 id="h1-test">Not message</h1> <p id="p-test">It is not message</p> </body> </html>
project.localhost/tests/selenium-tests/clear-test.html
open /tests/html-examples/clear-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
.
– , , .
, ? – . , . CSS , , , . . CSS, , . . .
project.localhost/css/styles.css v2
div.notify-message h1{ color:green; } div.notify-message h1 { font-size: 20px; } div.notify-message p { font-size: 14px; }
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(0, 128, 0)'
, !!! .
div.notify-message
h1
{
color:green;
}
.
CSS TDD
Test Driven Development. , ( , ) web- web- - . ( – , ). , , . , index.html
, , :
project.localhost/index.html v2
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest !</h1> <p>Welcome to our beautiful word!</p> </div> <div class="error-message"> <h1>You are not authorized.</h1> <p>Please login or register now.</p> </div> </body> </html>
“ ”, , , " ", web– :
project.localhost/tests/html-examples/error-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="error-message"> <h1 id="h1-test">Error message</h1> <p id="p-test">It's error message</p> </div> </body> </html>
Selenium IDE :
project.localhost/tests/selenium-tests/error-message-test.html
open /tests/html-examples/error-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value '32px' did not match '20px'
[error] Actual value '16px' did not match '14px'
TDD . CSS.
project.localhost/css/styles.css v3
div.error-message { color:red; } div.notify-message { color:green; } div.notify-message h1, div.error-message h1 { font-size: 20px; } div.notify-message p, div.error-message p { font-size: 14px; }
.
, , . . html-examples
html-. . - html . , – . , .
TDD-, :
, CSS- .
. 20px
, 14px
. . index.html
styles.css
:
project.localhost/index.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest</h1> <p>Welcome to our beautiful world!</p> </div> </body> </html>
project.localhost/css/styles.css
div.notify-message h1 { color:green; font-size: 20px; } div.notify-message p { color:green; font-size: 14px; }
styles.css
. index.html
. , ( -). notify-message-example.html
project.localhost/tests/html-examples/notify-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="notify-message"> <h1 id="h1-test">Notify message</h1> <p id="p-test">It's notify message</p> </div> </body> </html>
id
, DOM-. -test
, id
. Firefox Selenium IDE ( , Selenium IDE HTML-, , ):
project.localhost/tests/selenium-tests/notify-message-test.html
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
[error] Actual value 'rgb(0, 128, 0)' did not match 'green'
[error] Actual value 'rgb(0, 128, 0)' did not match 'green
'
getComputedStyle()
rgb(r,g,b)
. , . , . .
project.localhost/tests/selenium-tests/notify-message-test.html v2
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
, . , , .
project.localhost/tests/html-examples/clear-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1 id="h1-test">Not message</h1> <p id="p-test">It is not message</p> </body> </html>
project.localhost/tests/selenium-tests/clear-test.html
open /tests/html-examples/clear-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
.
– , , .
, ? – . , . CSS , , , . . CSS, , . . .
project.localhost/css/styles.css v2
div.notify-message h1{ color:green; } div.notify-message h1 { font-size: 20px; } div.notify-message p { font-size: 14px; }
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(0, 128, 0)'
, !!! .
div.notify-message
h1
{
color:green;
}
.
CSS TDD
Test Driven Development. , ( , ) web- web- - . ( – , ). , , . , index.html
, , :
project.localhost/index.html v2
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest !</h1> <p>Welcome to our beautiful word!</p> </div> <div class="error-message"> <h1>You are not authorized.</h1> <p>Please login or register now.</p> </div> </body> </html>
“ ”, , , " ", web– :
project.localhost/tests/html-examples/error-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="error-message"> <h1 id="h1-test">Error message</h1> <p id="p-test">It's error message</p> </div> </body> </html>
Selenium IDE :
project.localhost/tests/selenium-tests/error-message-test.html
open /tests/html-examples/error-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value '32px' did not match '20px'
[error] Actual value '16px' did not match '14px'
TDD . CSS.
project.localhost/css/styles.css v3
div.error-message { color:red; } div.notify-message { color:green; } div.notify-message h1, div.error-message h1 { font-size: 20px; } div.notify-message p, div.error-message p { font-size: 14px; }
.
, , . . html-examples
html-. . - html . , – . , .
TDD-, :
, CSS- .
. 20px
, 14px
. . index.html
styles.css
:
project.localhost/index.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest</h1> <p>Welcome to our beautiful world!</p> </div> </body> </html>
project.localhost/css/styles.css
div.notify-message h1 { color:green; font-size: 20px; } div.notify-message p { color:green; font-size: 14px; }
styles.css
. index.html
. , ( -). notify-message-example.html
project.localhost/tests/html-examples/notify-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="notify-message"> <h1 id="h1-test">Notify message</h1> <p id="p-test">It's notify message</p> </div> </body> </html>
id
, DOM-. -test
, id
. Firefox Selenium IDE ( , Selenium IDE HTML-, , ):
project.localhost/tests/selenium-tests/notify-message-test.html
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
[error] Actual value 'rgb(0, 128, 0)' did not match 'green'
[error] Actual value 'rgb(0, 128, 0)' did not match 'green
'
getComputedStyle()
rgb(r,g,b)
. , . , . .
project.localhost/tests/selenium-tests/notify-message-test.html v2
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
, . , , .
project.localhost/tests/html-examples/clear-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1 id="h1-test">Not message</h1> <p id="p-test">It is not message</p> </body> </html>
project.localhost/tests/selenium-tests/clear-test.html
open /tests/html-examples/clear-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
.
– , , .
, ? – . , . CSS , , , . . CSS, , . . .
project.localhost/css/styles.css v2
div.notify-message h1{ color:green; } div.notify-message h1 { font-size: 20px; } div.notify-message p { font-size: 14px; }
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(0, 128, 0)'
, !!! .
div.notify-message
h1
{
color:green;
}
.
CSS TDD
Test Driven Development. , ( , ) web- web- - . ( – , ). , , . , index.html
, , :
project.localhost/index.html v2
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest !</h1> <p>Welcome to our beautiful word!</p> </div> <div class="error-message"> <h1>You are not authorized.</h1> <p>Please login or register now.</p> </div> </body> </html>
“ ”, , , " ", web– :
project.localhost/tests/html-examples/error-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="error-message"> <h1 id="h1-test">Error message</h1> <p id="p-test">It's error message</p> </div> </body> </html>
Selenium IDE :
project.localhost/tests/selenium-tests/error-message-test.html
open /tests/html-examples/error-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value '32px' did not match '20px'
[error] Actual value '16px' did not match '14px'
TDD . CSS.
project.localhost/css/styles.css v3
div.error-message { color:red; } div.notify-message { color:green; } div.notify-message h1, div.error-message h1 { font-size: 20px; } div.notify-message p, div.error-message p { font-size: 14px; }
.
, , . . html-examples
html-. . - html . , – . , .
TDD-, :
, CSS- .
. 20px
, 14px
. . index.html
styles.css
:
project.localhost/index.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest</h1> <p>Welcome to our beautiful world!</p> </div> </body> </html>
project.localhost/css/styles.css
div.notify-message h1 { color:green; font-size: 20px; } div.notify-message p { color:green; font-size: 14px; }
styles.css
. index.html
. , ( -). notify-message-example.html
project.localhost/tests/html-examples/notify-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="notify-message"> <h1 id="h1-test">Notify message</h1> <p id="p-test">It's notify message</p> </div> </body> </html>
id
, DOM-. -test
, id
. Firefox Selenium IDE ( , Selenium IDE HTML-, , ):
project.localhost/tests/selenium-tests/notify-message-test.html
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); green verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
[error] Actual value 'rgb(0, 128, 0)' did not match 'green'
[error] Actual value 'rgb(0, 128, 0)' did not match 'green
'
getComputedStyle()
rgb(r,g,b)
. , . , . .
project.localhost/tests/selenium-tests/notify-message-test.html v2
open /tests/html-examples/notify-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 128, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 20px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 14px
, . , , .
project.localhost/tests/html-examples/clear-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1 id="h1-test">Not message</h1> <p id="p-test">It is not message</p> </body> </html>
project.localhost/tests/selenium-tests/clear-test.html
open /tests/html-examples/clear-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(0, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
.
– , , .
, ? – . , . CSS , , , . . CSS, , . . .
project.localhost/css/styles.css v2
div.notify-message h1{ color:green; } div.notify-message h1 { font-size: 20px; } div.notify-message p { font-size: 14px; }
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(0, 128, 0)'
, !!! .
div.notify-message
h1
{
color:green;
}
.
CSS TDD
Test Driven Development. , ( , ) web- web- - . ( – , ). , , . , index.html
, , :
project.localhost/index.html v2
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <h1>Super project</h1> <p>It's really very big and complex project !</p> <div class="notify-message"> <h1>Hi,Guest !</h1> <p>Welcome to our beautiful word!</p> </div> <div class="error-message"> <h1>You are not authorized.</h1> <p>Please login or register now.</p> </div> </body> </html>
“ ”, , , " ", web– :
project.localhost/tests/html-examples/error-message-example.html
<html> <head> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> <body> <div class="error-message"> <h1 id="h1-test">Error message</h1> <p id="p-test">It's error message</p> </div> </body> </html>
Selenium IDE :
project.localhost/tests/selenium-tests/error-message-test.html
open /tests/html-examples/error-message-example.html verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('color'); rgb(255, 0, 0) verifyEval window.getComputedStyle(window.document.getElementById('h1-test'),null).getPropertyValue('font-size'); 32px verifyEval window.getComputedStyle(window.document.getElementById('p-test'),null).getPropertyValue('font-size'); 16px
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value 'rgb(0, 0, 0)' did not match 'rgb(255, 0, 0)'
[error] Actual value '32px' did not match '20px'
[error] Actual value '16px' did not match '14px'
TDD . CSS.
project.localhost/css/styles.css v3
div.error-message { color:red; } div.notify-message { color:green; } div.notify-message h1, div.error-message h1 { font-size: 20px; } div.notify-message p, div.error-message p { font-size: 14px; }
.
, , . . html-examples
html-. . - html . , – . , .
TDD-, :
, CSS- .