Testing CSS in Selenium IDE
I am increasingly trying to use automated testing in my practice. At the same time, I try not to produce tools and libraries, to manage with simple approaches. Not so long ago, I thought about how to test CSS files. An Internet search revealed the following points of view on this question:
- Testing CSS does not make sense, since it is a declarative language, and its result is a laid out image of the page that can only be evaluated visually.
- You can test CSS by removing the bitmaps from the generated page and matching it with the reference image. There are even some tools for this.
- Found some CSS-Unit library.
I must say that I did not like all the options. In the end, I was able to test CSS using a text editor, Firefox + Selenium IDE and ... and nothing else.
Some theory
The most constructive ideas brought me a long meditation on the tab Firebag "Compiled style".
')
From the contents of this window, it became clear that the browser generates a page in at least two stages.
- Definition of all parameters of all elements, based on CSS
- Layout page, based on the values obtained
If the second stage does not test, except as bitmaps, the first, most likely, is quite amenable to automated testing. But it is at the first stage that almost all errors in the writing of CSS arise. WEB-coder spends more than half of his life looking at crossed out and highlighted lines in the debugging window of styles, trying to understand what has been inherited from and what has been applied to. If we manage to test it, we will remove most of the problems with CSS files in our project.
All we need is to access the values shown in the Firebag “Compiled Style” tab. A short yaw on the Internet led to the discovery of the function:
var style = window.getComputedStyle(element[, pseudoElt]); The name speaks for itself. The only thing that can be explained is the second parameter. It can be useful if we want, for example, to find out what color the link will be if the cursor hovers over it. It remains only to recall that in Selenium IDE there is a remarkable family of
xxxEval functions that can evaluate any JavaScript expression. Now you can try all this in practice.Some practice
We carry out a little preparatory work. Create a folder structure:
project – project/css – css project/tests – project/tests/html-examples – html- project/tests/selenium-tests – Selenium- Give the
project folder under the control of our favorite http-server, and set up access to it at project.localhost project.localhost .At the root, according to a long-established habit, we start the file
index.html , which makes our project look like real, and also symbolizes the source code of the project, mercilessly changed by programmers regardless of our will and desire. At the same time, we get the styles.css file, which contains the css-code that we will develop and test.Suppose in our project we need to display notification messages. They should be displayed in green font. The message consists of a title
. 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- .Source: https://habr.com/ru/post/190358/
All Articles