Django: Automated testing with selenium

Hello again,

A couple weeks ago I wanted to test the templates of a site I’m building, mainly javascript functions and some user interactions, and decided to use selenium.

I wanted to use raw selenium because that’s my first time using it in python, so I wanted to learn how it works without the help of third-party modules.

To my surprise, I didn’t find a straight forward tutorial, so I’m writing one with the steps I did to make it work. The tests I created are available at the end of this post.

It’s worth noting that I used selenium 3.1, django 2.1 and python 3.6. Running the server on Ubuntu 18.

Let’s begin!

1. Installation

The first step is to install selenium. I used pip for that:

pip3 install selenium

Selenium requires a driver to launch the browser, and each browser has its own. Firefox, the one I chose, uses the geckodriver, which is available here.

The driver must be in a folder listed in the PATH environment variable. In Ubuntu, just move it to the /bin folder and it’s ready to use.

2. StaticLiveServerTestCase

Selenium demands the test class to be either a LiveServerTestCase or a StaticLiveServerTestCase, that’s because it needs the server running to test the site.

Both classes are similar, the difference is that the latter will load the static content (custom css and javascript files for instace) while the former won’t.

I prefer StaticLiveServerTestCase because one of the reasons for using selenium is to test the javascript functions, so, static content is necessary.

3. Class Structure

The main methods to consider are:

  1. setUpClass(): executed once before the first test.
  2. tearDownClass(): executed once after the last test.
  3. setUp(): executed before each test.
  4. tearDown(): executed after each test.

The setUpTestData() isn’t on the list because it isn’t available in LiveServerTestCase.

A good place to open the browser is in the setUpClass() because it takes long to open it, this way it’ll use the same window in all the tests. What leads to using tearDownClass() to close the browser.

In a LiveServerTestCase the database is flushed after each test, then it’s necessary to populate it before each test too. Either setUp() or the own test are good places for it, although setUp() is the expected place and should be favored.

tearDown() isn’t really necessary for the base structure but it’s good to know that it exists :3

The base test class should look like:

4. live_server_url

To access a webpage in selenium we must use the URL of the testing server. The URL changes everytime time you run the tests, a different port is assigned to the server, but it’s stored in the variable live_server_url. An webpage can be accessed like this:

5. Explicit and Implicit Waits

As far as I know selenium waits the page to be ready before executing commands. However, in some cases we will need to wait some action to complete so we can resume testing the page.

Usually this happens when a javascript function is used, and we must wait its completion, or when the test case loads another page and we should wait for it, otherwise the next comands will run in the initial page and fail.

In those cases we can use both implicit or explicit waits. The implicit one simply stops the execution for a fixed amount of time, you can use it as in:

driver = webdriver.Firefox()
driver.implicitly_wait(10) # in seconds

Usually, implicit waits are a bad choice because you’ll risk either having unnecessarily long wait times or inconsistent tests.

Explicit waits, on the other hand, are more reliable. They’ll wait for a given expected condition to happen and resume as soon as it does. The following example shows how to wait for an element to be clickable:

There are multiple builtin expected conditions which you can find here. Notice that some conditions expect a locator, like element_to_be_clickable(locator) in the snippet above, in this case you should use the By class. You can find all the available locators here, the usage of them all is similar to By.CSS_SELECTOR.

6. Login user in code

In some tests it might be useful to login the user in code. The other option is using selenium to simulate the actual login, which will take longer. In case you are testing a page that requires the login instead of the login page, it’s better to save this time.

The trick I found to login the user is to use cookies to pass a logged in session to the browser. You can set the cookie in the setUp() like:

This trick will make the slow tests a little less slow šŸ™‚

7. Auto ids

At last, I’d like to warn you about creating objects in the database when the model uses auto generated ids. It happens that the database is flushed between tests but the auto id counter won’t necessarily reset.

Then, if you add two objects to the database, their ids will be 1 and 2 in the first test and 3 and 4 in the second. This behavior might break some tests which use the id to identify the object. In this case, always set the id yourself, like:

8. Example

With everything stated above you should be ready to test your project with flexibility. I’ll also leave the tests I created here as reference, hope they help šŸ™‚

Advertisements

Django: Create and test a view with two forms

Hello!

I’ve been working on a front page for a personal site. The first thing was to decide what should be in it. After some research and much thought, I decided to have both the login and register forms in the page, along with a single phrase that describes the site. I like this design mostly because the user is at 0-click distance from both login and register.

Having Linkedin and Quora as my main inspirations, I eventually implemented it. Here is the first version:

front_page
Login and register form in front page

I should improve the brand name and its core message soon, but I liked the design.

Fine, enough said about the design, let’s see how it works. FYI, I’m using Django 2.1 and assuming that you know how to build a view with a single form, in case this premise isn’t valid, refer to Django forms.

I found two options for having two forms in a single page:

1) Have separate views and use the same template in both.

2) Have a single view and template.

I don’t like 1) because, as far as my knowledge goes, it requires two different URLs for the “same” front page. Even though handling the forms and creating tests for them easy.

To follow with this option you just need to create two views and point the forms to their respective ones, by setting the action as the view URL. The rest is similar to create a view with a single form:

That’s it.

Now, for 2) we just need to find a way to identify, in the view, which form has triggered the POST request. There are multiple ways to do this. I chose to use a trick I found out there, it is to create a name attribute in the submit button and identify the form there. The template should have something like:

Notice that both forms point to the same view {% url ‘front-page’ %} and the submit inputs have different names.

In the view we just need to find which name is in the POST request, like:

Now the front page works with both the login and register forms. We should create some tests to guarantee the view works properly.

There are multiple tutorials about setting a test environment for Django, then I’ll focus only in how to test the right form in a view which has two. There’s no big secret, the snippet bellow speaks for itself:

Look at the POST request in test_user_login():

self.client.post(‘/’, {login_form: True, username: Testuser1, password: senha8dg},)

It makes a POST request to the URL ‘/’ (front page) and has the key ‘login_form’ in the data it passes to the view. This acts similarly to clicking the login button. Testing the register form is similar, see test_user_register_creates_user().

That’s it, we can test the front page now šŸ™‚

Furthermore, there are two challenge tests in the snippet above, they initially failed when I built the first version and I found fixing them a good learning experience, which I recommend.

I might make a post for them, maybe, the future will tell… See you!

Bootstrap 4: Delete confirmation modal for list of items

Hello again!

A couple days ago I wanted to use a modal to confirm the deletion of an item in a list. Like this:

delete_confirmation_modal
Confirm delete modal

The requirement were: 1) have a single modal in the page and 2) make a reusable modal, since it’s possible to delete items from other views too.

When there is a single element assigned to the modal, we can use something similar to a logout confirmation modal. However, when there are multiple elements in a list, this isn’t enough. It’s necessary to track which element last triggered the modal for deleting the right one.

To do this, we can add an attribute to the modal, let’s call it caller-id, and assign to it the id of the element which last called the modal. When the confirm button is clicked, it redirects to the href of the caller element, which should be the URL to delete it.

In order to meet the second requirement, we should write the modal in a separated HTML file, which can be included in any desired page. The one I used was:

And, to associate a button to the modal, we can use something similar to:

I’m using Django 2.1, and the snippet above shows in the first line how to include the confirm_delete_modal to the template. My app is named board, you should replace it with the right path for the file.

Line 3 shows how to associate a tag to the modal. In its original template, I iterate in a list of questions, where the current question is stored in the object question.

Note that every element associated to the modal must have a different id, and, in this case, have the class confirm-delete.

The last step is to perform the actions using JavaScript. I used jQuery in this example:

The first block adds an event handler for the click event in elements of the class confirm-delete. When the click happens, it writes the id of the element in the caller-id of the modal.

The second block adds a handler for the click event of the confirmation button inside the modal. It finds the element which toggled the modal, by the called-id, and redirect the page to the its href, the delete URL in this case.

That’s it, now we have a generic confirm deletion modal. It can be reused in other views by including its HTML to the template, and adding the confirm-delete class to the buttons which should trigger it.

By writing this post I realized that I didn’t really need the class confirm-delete, using the selector data-target=#confirmDeleteModalinstead seems simply better. I’ll try this way next time :3

Bootstrap 4: Trigger page redirect after modal is hidden

Hello, long time no see… I’m learning the basics about web development and am building a site to use as my workshop. Some things I try to do appear to be very common but there isn’t an easy-to-find thread on stack overflow or blog post about it, the information is there but is scattered.

Executing a redirect after hiding a modal is one of these things and I’m here to show a direct approach for doing it using Bootstrap 4.1. Also, I’m using Django 2.1.

I needed it to create this logout flow: 1) click the logout button, 2) a modal shows the log out confirmation and 3) the user is redirected to the logout URL.

Since I’m using Django’s builtin registration views [1], the log out is done by simply redirecting the user to the {% url ‘logout’ %}. That URL will log the user out and render a specific template, which, in this case, I left with a single script to redirect to the login page.

Okay, the first step is to add the modal to the template, put it anywhere inside the <body> of the page. I’m using a simple Bootstrap 4 modal [2]:

And the custom CSS:

The second step is to show this modal when a button is clicked. I’m using a dropdown item [3] as a button inside a navigation bar [4]. The tag of this item is:

It toggles the modal with id=”logoutModal” as you can see in the data-toggle and data-target properties. This is enough to show the logout confirmation when its clicked.

You can also see that this item has a href that points to the correct logout view. However, this isn’t automatically triggered along with showing the modal. I think Bootstrap overrides this behavior but let’s keep the href there so we can use it in the next step.

To accomplish the desired redirect I needed to use javascript (jQuery). The idea is to bind an event handler for when the modal is hidden, like this:

This triggers the redirect whenever the modal is hidden. Notice that in the function I get the URL from the href property of the logout button. We could write the URL directly to window.location, but getting it from the href puts all the important information in the same place, the tag which toggles the modal.

Beware, you’ll find many people out there suggesting the following:

That won’t work in this case because the modal is initially hidden, then jQuery won’t bind the handler to it. You should bind the handler to something visible, document for instance.

Now, when the logout button is clicked, the modal already shows and expects the user to click anywhere in the screen for it to disappear and trigger the redirect. Additionally, I’m using the following event handler to hide the modal 5 seconds after its shown:

The final step is to redirect to the login page after the logout. I use the following looged_out template:

The logout flow is all set now, the result will look similar to:

redirect_after_modal
Trigger redirect after modal fades

In this flow the confirmation is shown before the actual logout. In some corner cases the logout might fail even after the confirmation that it worked, which is a problem. However, it works most of the time and I think the effect looks nice :3

To fix this I’ll probably have to use a custom logout view but this isn’t worth the effort for now, the site’s core feature isn’t working yet, and it is a bigger priority.

Also, I’m sure there are better ways to organize the abstract links between HTML and JS, my initial impression is that there aren’t many organization rules in web development. Hope to develop this intuition with practice.

That’s it, I’ll try to post everything that I find relevant in building this site, then I should be back soon šŸ™‚

References:

[1] Django Authentication

[2] Bootstrap Modal

[3] Bootstrap Dropdown

[4] Bootstrap Navbar

Visual Studio: Put git hash in version

Hello again! Recently I faced the problem that I needed to recover the code, which generated a dll, only by looking at the dll itself.

The project had many independent contributors, and was deployed to a few different environments, what triggered a few versions from local branches.

Version numbers alone didn’t solve it, but let’s talk about them first.

Versioning is a common problem in software development, however, there isn’t a consensus about how to properly version a project. There are some guidelines, and a lot of discussion out there, but in the end, the team should choose what works best for them.

I like to use three numbers,Ā major.minor.revision, starting at 1.0.0 it progresses like that:

  • Increase major version whenever the changes aren’t backwards compatible. Usually those are great changes and this number shouldn’t be increased often.
  • Increase minor version whenever you add a new feature which is backwards compatible.
  • Increase revision version after minor changes, like bug fixes, organization commits etc.

I find those three numbers enough, along with the trick I’ll show you next, but a fourth number at right might be useful:

  • Local version, it means how many local changes, not pushed commits for instance, were made.

Back to the initial problem, from its many solutions, I found best to input git info into the dll version, and make it automatic, then there is no chance to forget doing it. The trick was to use hooks.

First I tried git hooks, it didn’t work, but let’s take a look at them anyway :3

Git hooks are shell scripts that areĀ hookedĀ to an action, they are executed whenever the action is triggered, before or after it, depending on the hook. Those scripts must be put in the folderĀ ‘ProjectFolder/.git/hooks’, you can see a few samples from git in that folder already. To activate a hook just remove the .sampleĀ extension and it’s ready.

The idea was to write the git hash in the version file right after a commit and amend the changes, that’s it, only a post-commit hook needed.

Little did I know that there is no amend, there is only removing the last commit, adding the new changes and making a new one, with a different hash, then the hash number in the version is meaningless.

Luckily there are also build hooks, the same principle of git hooks applied to the building process, then the solution was to write the git hash in the version file right before building the dll.Ā I used Visual StudioĀ 2013 and C# for this but it should apply to other tools as well.Ā (This one works)

Actually, I preferred to create an additional version file, containing only the git info. Its possible to overwrite the standard version file but I didn’t want to unload the project for every version change. Probably this can also be avoided but I didn’t find an easy way :3

Visual Studio offers a visual interface to define hooks, go to Project Properties -> Build EventsĀ and you can see the text boxes for Pre-build and Post-build events. As far as I know those commands will be executed in the Windows PowerShell at the right time. You can also define the hooks directly in the csproj file, which I preferred.

This file is a XML file, where the propertie DefaultTargets, of theĀ ProjectĀ tag, register the hooks, having BuildĀ as the main build event. The events are executed in the same order they appear. Take a look:


You can see that theĀ VersionĀ hook,Ā which creates the version file, is executed right before building the project. After building theĀ Clean hook, which deletes the version file, is executed.

Ok, now we just need to register the hooks, luckily its very easy, just create a Target tag, right under the Project tag,Ā with the hook name as a property, like this:


The only missing piece is the git hash, to add it into the version I used the packageĀ MSBuildTasks, its available via NuGet. We just need to install it and add the following tag in the csproj file:


Right under the tag:


Beware of the MSBuildTasks version, check which one is installed in the packagesĀ folder inside the project folder.

With MSBuildTasks you can use the GitVersion tag, which defines a few environment variables, being one of them the git hash. Since a code snippet is worth a thousand words:


You can see that the git directory is defined and that GitVersion outputs the parameterĀ CommitHashĀ from its inner property with the same name. Right after, this parameter is used in theĀ AssemblyInformationalVersionĀ as “git hash – $(CommitHash)”.

The whole csproj file will look similar to this:


...

The result is that after building the project, the output file property “Product Version” contains the git hash.

Hope this can be useful to someone šŸ™‚

IPtables-translate, JSON and misfortune

In these past weeks I started with an iptables translation.

We know that nftables is here to replace iptables, so it is natural that many of its users have their preferred rules set with iptables, and would appreciate to have an easy way to set a similar ruleset using nftables, for this iptables-translate is provided.

Using iptables-translate is very simple, you just need to write your iptables rule and it outputs a similar rule in nftables if the rule is supported, if not then the iptables rule will be printed. An usage example:

$ iptables-translate -A OUTPUT -m tcp -p tcp –dport 443 -m hashlimit –hashlimit-above 20kb/s –hashlimit-burst 1mb –hashlimit-mode dstip –hashlimit-name https –hashlimit-dstmask 24 -m state –state NEW -j DROP

Translates to:

nft add rule ip filter OUTPUT tcp dport 443 flow table https { ip daddr and 255.255.255.0 timeout 60s limit rate over 20 kbytes/secondĀ  burst 1 mbytes} ct state new counter drop

The above example comes from the module I wrote the translation to, hashlimit, it’s similar to flow tables in nftables. Each module is translated separately and the code is in its iptables source file, much of the supported features have their translation written but some still need some work. Writing them is an actual nftables task in this round, future interns, go and check the xlate functions in the iptables files, it can be of great help to the community and to yourself šŸ™‚

After this task I looked into the JSON exportation of nftables ruleset, in the future importing a ruleset via JSON should also be possible, but for now only exporting is. This feature is still being defined and many changes are happening. What I did was to complement a patch to define some standard functions and use them to export rules. JSON in nftables is a little messy, probably it will get more attention soon.

Now about misfortune, last week an accident happened and my notebook is no longer working, I’m trying to have it fixed but it stalled my contribution with patches. Hopefully next week this will be sorted and I can finish some patches.

I’ll probably write a new post about my experience with Outreachy soon, now it is late and I need to go home :), see you.

Documentation weeks

nftables has two main documentation sources:

  • nftables wiki, the wiki provides an example oriented documentation, so the user can see how the features are useful in practice. Usually the wiki also states which Kernel and nft versions are needed for each feature. Also, since many nftables users come from iptables, it is useful to compare a feature to the one it replaces in iptables.
  • nft manpages, the manpages are directed to users who have some experience with the software, usually the grammar of a feature is displayed and the existent values for each component listed, along with a short description.

These past two weeks were all about documenting parts I helped implementing and others which I didn’t. Providing a good documentation is tricky, you should put yourself in the user shoes and write what’s relevant to them.

I have a feeling that documenting a feature you didn’t work leads to better results, since you don’t need to make an effort to visualize the system as an unexperienced user does. However, it is a lot harder, when you are writing references for a feature it usually means you can’t find other references except on git log and the code itself.

It feels similar to hunting bugs, actually odds are you find some in the process, or at least some unexpected behavior. I found a few places I thought worthy of improvements but this thought didn’t ripen, the reason being it provides less benefits than loss to fix them. In these past two weeks I’ve seen this a few times, after some thinking and tracking the code changes I’d see they are planned behaviors, using git blame and git log you can track the reason for the changes and often they’re a trade, an undesired behavior is allowed (when it doesn’t brake things) to avoid code duplication or too much complexity. Guess I should change my mindset to optimizing for simplicity and code maintenance.

Even though most of the “bugs” weren’t real bugs, I think I found one that really is and will try to fix it for now, see you.