In this section we will learn the basics of HTML, which are quite simple; on the way we will fix our remaining tests and create new ones for new pages. We will write static HTML in the view of our
index function. For learning purposes let's remove all content from the
index.html file; but before we commit the changes to our repository:
$ hg status
Remove all content from
index.html. If you pay attention, you see that we lost our whole design, that we inherited from the default web2py application; run the tests again and see how the error messages are changing (From now own you should be able to run the tests yourself.).
What is HTML?
HTML is a markup language that structure websites in chunks of content and meta information about the content itself - which language has it, who is the author, what ist the title of the website. You can imagine a website like a magazine article: It consists of a title, a header, maybe several subheadeings, a lot of paragraphs, etc.
HyperText Markup Language (HTML) is the main markup language for web pages. HTML elements are the basic building-blocks of webpages. HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like ), within the web page content. HTML tags most commonly come in pairs like
. The first tag in a pair is the start tag, the second tag is the end tag (they are also called opening tags and closing tags). In between these tags web designers can add text, tags, comments and other types of text-based content. The purpose of a web browser is to read HTML documents and compose them into visible or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page.
HTML structures it's content in elements, for example a very basic
version of our
index.html file could look like this:
In line 1 we define the document type of our webpage, the doctype
html is always fine and you won't need any other in the future.
Line 2 opens the html document.
In line 3 begins the head section of the document, which contains information about the content of the page, in our case the
title of the page - which is defined in line 4.
In line 6 starts the content of the page which is encapsulated by the
h1 in line 7 stands for first a first order headline.
As you probably recognized, HTML elements are normally surrounded
by a start tag and an end tag. There are also a few elements that have only
one tag - the
img tag is the most important.
The elements are divided in two groups block and inline
elements. Block elements usually claim the whole width for them self;
inline elements only take the space they need. In our
index.html we use
only block elements at the moment.
Let's ad an inline element:
We created an inline element
strong and filled it with the content
Let's see how our page looks in the browser. The look of the content
is determined by the default settings of the browser, later in
this chapter we will define our own styles. If you press
can examine the source code and the styles of the page in the web
Now let's check if we pass our tests.
$ python functional_tests.py
Looking good so far. Maybe it's time to commit our changes:
$ hg commit -m"Finished first draft of home page"
More Static pages
If we look at our website structure, we can see the rest of our static pages like Privacy, About, etc.
We will begin implementing them by writing our tests first.
test_static_pages.py and add the following content:
functional_tests.pyand look at the output:
$ python functional_tests.py
The new tests should all fail, cause the pages are not created yet. We will change this now and pass each test one by one. We will first create a new controller function in the
default.py controller and then create a corresponding view with the content we need. Open
default.py in gedit:
$ gedit controllers/default.py
and add the following content:
Now run the
functional_tests.py again, you should only have 4 errors and one failure remaining. This means 4 tests did pass.
What the difference between a failure and an error? Errors get raised if some code is not executable, e.g. if there is no title tag in the webpage and you try to
self.browser.find_element_by_tag_name('title') you get an error. Failures on the other hand come from unsatisfied assertions, e.g. the privacy page has a title, but is has a wrong value, ergo you get a failure (If you wonder why there is an title element in the privacy page: It gets created by some default/fallback values of web2py.)
To pass the two other tests for the privacy page we need to create a new view in the views folder:
$ gedit views/privacy.html
and we begin with the basic html structure of the view:
again test it (Yeah I know we test a lot, but it is for learning purposes!). What does it say? 5 errors remaining.
you are right: test it! This time we should only have 4 errors remaining. Seems we're heading in the right direction. Now we are finishing the last test for the privacy page, add a header in
Now if we start our tests it, we are down to 3 errors. We did pass all the test for the privacy page. That was fun, wasn't it. We will fix now pass the tests for the about page. This time we will write all the code at once and then check if we pass the tests:
First add an
aboutfunction to the
def about(): return dict()
then create a new view
$ gedit views/default/about.html
with the following content:
Now test your Tukker.Me application again: TaDA, we passed all our test! We should commit that :)
$ hg commit -m"Created privacy and about page (controllers, views, tests)"
Question and Answers about Functional Tests
- Do I have to test every bit on a webpage?
- You should test as much as possible. Everything, that has to be implemented by you, has to be tested. In our example we were quite extreme, testing even simple content. On a production site you probably wouldn't do this. Especially if you have longer text passages.
- How often should I test?
- You should test as often as possible. Try to pass one test at a time. I know that seems exaggerated, but if your projects get bigger this will save you a lot of time and hassle.
- Do I have to test every sentence that gets displayed on the page?
- No, normally not. We did it for learning purposes. You should always test user interaction like clicking on a link or submitting forms. We will see this later in the book.