Logo
/ web-application-testing

Markup and CSS: Some Tips for Successful Testing

By on Mon Feb 27 2017 00:00:00 GMT+0000 (Coordinated Universal Time)
Markup and CSS: Some Tips for Successful Testing

Subscribe Now!

Get the latest QA news and tips from DeviQA

Why is it important to check the quality of the markup

The issue of concern to both customers and frontend developers. At first - make sure that the contractor has fulfilled its job efficiently. Imposer is useful to check the layout of the site before sending it to the client's approval. This will save time, otherwise it may happen that changes will have been added just after the delivery of the project. If you are creating your site, the tools are very useful too.

Testing tips & tools for CSS testing

Debugger. One of the easiest ways that you can check the layout of the site - to include a debugger. It starts after pressing F12 in the browser. This tool helps to see how will be changed the appearance of the page, if you remove some elements or styles from it. For example, you have written a new property of the CSS, and then wrote a few. Decided to see how it will be looked in the browser.

It turned out that the elements do not appear as intended. This error occurred because of a property? Manually define this is too long. In the debugger, you can quickly disable all styles and quickly detect misprints. It also clearly visible errors. Most experienced web designers are looking for errors by using the debugger, and not reviewing the code.

Using the debugger

Pic. 1. With the debugger it’s easy to find errors.


W3C Validator. The service code checks for minor errors. W3C - an organization that is engaged in the development and official support for Web standards. As it sets these standards on the website, there is a special service that can check any page on the web for validation (ie, error). That is quite strict validator.

Often the customers use the such service, for trying to determine the quality of the layout. Even in a well imposed page validator can find more than thirty errors. However, there is nothing to worry about. Service considers for the mistake, even what you did not put a space before the value of the html-attribute. Now imagine that in this style you've written all of the code. You will have hundreds of errors, but in fact the layout will be done correctly, you just broke standards that W3C established for the correct spelling of the code.

More information about these regulations can be found at W3C. In fact, the only site that a validator checks without errors, this site is W3C. Therefore, it is not necessary to correct any errors. Still, the validator may point to some serious problems, so check the site layout it is desirable. validator.w3.org - validator.

IE Tester. There is a program that allows you to test your site in older versions of Internet Explorer. Many customers today still require the support of the such browser to their sites, for displaying of the site in the same way as in other browsers. Perhaps now there are online services where you can perform a similar check. In any case, you only need to insert the correct code and the program will show how it would be displayed in IE 6, 7 and 8.

Usually, support the sixth version is not actual for nowadays, and the eighth can behave quite adequately if, of course, in your layout is not presented new CSS-properties. In older versions of IE has an interesting feature - they read the commented code. Therefore, in one of the comments, you can connect a style sheet that will be specially created for older versions of the browser. Other browsers simply skip this fragment. Such a method can be used if you really need a very strong support IE.

Other services. Recently, services for testing CSS becomes more and more. It makes no sense to dwell on a certain service. Most of these services work well, but still do not check everything thoroughly.

How to check the adaptive layout

We should also talk about adaptive layout. The best instrument in this case is an ordinary is a browser window. Just reduce the width of the window and watch the changing design. If you see that there is a horizontal scrolling or some elements don't intermeddle on the page, it means that your layout is far from ideal, and it needs to be improved. If you want to see how the site will be displayed on a big screen - zoom out. Of course, if you have a tablet and a phone, you can upload your layout to some free hosting and go to the site by using these devices.

Browser window

Pic. 2. - Reducing the width of the browser window - the easiest way to test adaptive layout.

Cross-browser compatibility

How else to check the layout of your site? Be sure to be checking for cross-browser compatibility. We need to open the site in different browsers and see how it is displayed there. You can change the page size and font size. You should make sure that at least the majority of users of all will be fine. If you check manually, you can also ask your friends to check the layout in their browsers if their versions are different from yours. You can give one more advice - do not use too specific properties that are only supported in any one browser. And if you already use them, invent some alternative to other browsers. For some properties still need to be used-vendor prefixes. This is due to the fact that Web standards are constantly evolving and all browsers may not support all. But if we do check for cross-browser compatibility, you do it at least for these browsers: Chrome, Mozilla, Opera, Safari, IE.

There are very good advanced services for cross-browser testing. For example, browserstack.com. This check may cost you money. If you have a really big project and you want to thoroughly check it, then it makes sense to use such services.

Checking compliance with the layout

A layout can be checked by using a such method: screenshot of the imposed site page - add to the layout in Photoshop as a new layer. Set the layer transparency and see how items are displayed with the same layout. You can use a special plugin. For instance, Pixel Perfect for Mozilla.

Additional requirements

Naturally, in any normal layout should be written the encoding and doctype. Also the page should be checked when displaying pictures and/or javascript is turned off. The fact is that in any browser settings, a user can disable those options. Especially useful will prescribe alt attributes for images, so when a user will turn off displaying of images in the browser, he would be able somehow to navigate. In fact, the requirements for the layout can be a lot. For example, with the advent of HTML5 layout can be checked for proper semantic markup. However, this is not critical. The foregoing tests will be enough to safely run the normal working site.