How effective is your web application testing process?

There’s more to testing than setting <DOCTYPE> at the top of your HTML file (although it’s a good start).

Testing web applications and websites during development (in a production setting) usually requires some kind of testing automation. A large part of automated testing is making sure your app or website looks the same and works the same, across different browsers and operating systems.

This process is called normalization.

Why Normalize your web application development?

Any web-based application that uses HTML and CSS elements needs browser normalization. Without it, your website won’t look consistent between different users. And an inconsistent user experience can damage your brand and reputation.

One essential normalization method that the W3C organization recommends, is to ensure that selectors and names you write out for class or id names, are the same between HTML tags and CSS files. You should also check that the characters are exactly aligned without markings or word choices that could be misinterpreted by different browsers.

It’s also not uncommon for your users to have multiple browsers running on their devices. Normalization ensures that your application works for users running multiple browsers.

What other web application normalization methods are there?

Method #1: Mozilla documentation

Consulting the Mozilla project documentation is essential, but a specific way to do it is by auditing your web application or website HTML. This is especially important if you’re configuring rich text editor HTML. 

When you have a list of HTML tags, CSS items, and JavaScript functions that you suspect are risky, look them up in the Mozilla documentation. The documentation provides a compatibility table for different website elements at the end of each page.

Method #2: W3C Testing tool

There is also a website testing tool provided by the W3C organization which will check a live website, or allows you to upload your project index.html file for testing your website's normalization.

Method #3: Rely on the Reset CSS stylesheet

Eric A Meyer, an internationally recognized expert on the subjects of HTML, CSS, and web standards, created the reset.css stylesheet to ensure website normalization across browsers. It’s designed to be generic. This stylesheet has been incorporated by Google into its Blueprint project. 

Method #4: Install relevant testing automation 

When choosing a framework, make sure it can support all the browsers you need. There are multiple different kinds of testing frameworks. Each one tests websites and web applications in different ways. For instance, at Tiny, we’ve considered adding Cypress as a part of our Continuous Integration process.

Method #5: Developing in a team? Check each other’s work.

Teamwork in front-end development represents an essential standard. If you’re developing in a team, you can adopt a process such as: 

1. Test new plugins on our browser of choice
2. Push the changes into our testing branch
3. Ask another developer to test the plugin on a different browser
4. Respond to any comments left by the developer

What other normalization standards does Tiny use?

We officially support all major browsers – the TinyMCE application development uses JavaScript to normalize the experience across different browsers. Here’s our compatibility between operating systems and browsers: