Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by

How effective is your web application testing process?

Joe Robinson

August 11th, 2021

Written by

Joe Robinson

Category

Engineering

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: 

Browser | Operating System

Windows

Mac

GNU/Linux

Chrome

Firefox

Edge

IE 11

Safari

As part of our continuous integration, we’ve selected Bedrock as a testing tool. When running the latest build of TinyMCE's dev branch, our automated testing process ran 36,000 automated tests total across the Operating System and Browser combinations listed in the previous table.

We also employ QA testing, who check our development efforts with automated and manual tests depending on the plugin needs.

You can check our compatibility documentation for more information. And if you’re interested in developing something new based on Tiny, we have the TinyMCE Generator repository available to support new development projects.

byJoe Robinson

Technical and creative writer, editor, and a TinyMCE advocate. An enthusiast for teamwork, open source software projects, and baking. Can often be found puzzling over obscure history, cryptic words, and lucid writing.

Related Articles

  • Engineering

    Learn JavaScript in 2021: Hassib Modasser’s recommendation

    by Joe Robinson in Engineering
Subscribe for the latest insights served straight to your inbox every month.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor
Tiny logo
Privacy Policy - Terms of Use© 2021 Tiny Technologies Inc.TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.

Products

  • TinyMCE
  • Tiny Drive
  • Customer Stories
  • Pricing