![]() ![]() PhantomCSS allows you to run a headless browser, open a page and take a screenshot of the whole page or a particular element on the page. It is open source and developed by the guys at Huddle. PhantomCSS is a Node.js tool to perform visual regression testing. There are a number of tools to do that, but today we will be looking at one option in particular - PhantomCSS. We want to test not just that the text is generated correctly or appears in the DOM but to make sure that the whole element looks correct, i.e., making sure that the element is not hidden by display: none or that someone hasn't accidentally overridden the color of the text. You can also write a functional test using Selenium or Protractor to see if the element is actually present on the page with the correct text. To make sure it works, you can (and should) unit test the piece of code that produces the message, checking that it inserts the correct name. Imagine, that you want your website to greet your visitors with a friendly message: Just to make sure that you picked up the difference, let me give you an example. Instead of just making sure that some element or a text value is present in the DOM, the test actually opens the page and checks if this specific block looks exactly like you want it to. Visual regression testing takes an alternative approach to testing web pages. It is about a particular and a relatively new niche referred to as visual regression testing. This article is not about an overview on automatic testing in general. Automatic testing comes in many forms, from unit testing, when you test isolated pieces of code, to integration and functional testing, when you test how different parts of your system behave together. Depending on your experience, this realization might hit you in one big burst or it may gently come to you over time, but it will eventually become second nature. If you've done any serious development in your career you've likely reached the point when you realized the importance of automated testing during development. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |