Acceptance Testing and Javascript (Part 1 of 2)

In this video we are going to look at how we can use Codeception's Acceptance testing facilities to ensure that webpages that contain JavaScript are working as expected.

Codeception's default acceptance testing module - the PhpBrowser - will not actually test our webpages using a proper browser. So, whilst it will be happily able to browse your webpages, it won't truthfully be a real world / human viewing your site type experience.

This highlights an issue that may otherwise confuse you. If, for example, we are using our JavaScript to show / hide text that exists in the page when it has been rendered by our Symfony controller - that is to say, the template contains text that is hidden using CSS - then the PhpBrowser will not be able to differentiate between whether this text is correctly displayed or not. It will simply read the HTML, spot the text which matches what it expects to see, and reports back that it saw the text.

The inverse of this situation will throw the unexpected error. That is, if the text is hidden by your CSS stylesheet, and you ask Codeception to ensure it does not see:


Then it will confusingly still see it, because the text is there in the HTML. Codeception's PhpBrowser doesn't truly use your web page like a human.

Of course, I wouldn't be telling you all this if we didn't have a handy fix for this problem, so watch on to find out exactly how we can work round this.

Code For This Course

Get the code for this course.

Code For This Video

Get the code for this video.