Testing With Selenium - ThePix/QuestJS GitHub Wiki

This is something I experimented with, but then abandoned. I have removed this page from the table of contents, but I am leaving it in the Wiki as a record of what I did.

Selenium IDE is a relatively simple way to do unit testing. You set it to record, then interact with a web site, telling it to note various important points along the way. This creates a unit test. You can later run the test, and it will confirm that those points you noted are still there.

Install Selenium IDE

Selenium IDE is installed as a browser extension, and is available for Firefox and Chrome. The Chrome version can be found here.

Creating a Web Server

For Selenium to work, it needs to access your game via a web server, rather than from file (I think this is a security requirement the browser imposes). The simplest way to do that is to use the Python web server.

On Windows, you will need to install Python (for Apple and Linux, should already be there)

  • Go to python.org
  • Under the Download section, click the link for Python "3.xxx".
  • At the bottom of the page, choose the Windows x86 executable installer and download it.
  • When it has downloaded, run it.
  • On the first installer page, make sure you check the "Add Python 3.xxx to PATH" checkbox.
  • Click Install, then click Close when the installation has finished.

Once Pythin is installed, open a command prompt, and type:

python -V

This will tell you the Python version you have, confirming it is installed. Now navigate to the Quest 6 folder, and start the web server with:

python -m http.server

Or, if that fails:

python3 -m http.server

You should see this:

Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...

Now in your browser, go to http://localhost:8000/index.html.

Using Selenium

In Chrome, you can access extensions via the jigsaw-piece-shaped icon in the tool bar. Select Selenium IDE. Say you want to start a new project, give it a name, and the starting web address, http://localhost:8000/index.html. You should now be recording your first test.

Selenium will record every mouse click and text input. However, you also want it to check the outcome, so right click on what has changed (the new text normally), select Selenium - Verify - Text, or whatever as appropriate.

To end the recording, go to the Selenium window and click the stop button (towards the top, far right). To start a new one, click the record button in the same location.

Selenium gives the option to "asset" or "verify" the current state of the web page. The different is what happens if the state is not asit should be. With "assert", it gives up, terminating the test at that point. With verify it notes the failure but continues.

When you run a test, Selenium will open a new window, with your web page in it, and repeat what you have just done.

NOTE: With Selenium installed in Chrome, I started to get warning in the console. To disable them, in the developer tools, click the cog wheel in the upper right corner, and go down to Sources; disable the options: "Enable javascript source maps" "Enable CSS source maps". May need to close Chrome or perhaps just the tab for this to take effect.

NOTE: The web server will cache yoyr page, so if you make changes you will probably need to restart it, and then reload the page to see the effect.

NOTE: To stop the web server, do [ctrl]-C in the command prompt window.