系统上线发布清单

This article was originally published on LambdaTest. Thank you for supporting the partners who make SitePoint possible.

本文最初在LambdaTest上发布 。 感谢您支持使SitePoint成为可能的合作伙伴。

When you develop a website, going live is like a dream come true. But then you notice things going wrong after launch and it quickly becomes a nightmare. A friend of mine was so excited as he was about to launch his new website. But when he finally hit the shiny launch button, some unusual and concerning trends started to popup. After delving into the details in Google Analytics, he found out that the website had a very high bounce rate on Mobile devices.

当您开发网站时，上线就像梦想成真。 但是随后您会发现启动后出现了问题，并且很快就变成了噩梦。 我的一个朋友激动不已，即将推出新网站。 但是，当他最终按下闪亮的启动按钮时，一些异常且令人担忧的趋势开始出现。 在深入研究Google Analytics(分析)中的详细信息之后，他发现该网站在移动设备上的跳出率非常高。

The website was a mess on mobile devices, all the elements had left their places and the logo was not even fit to screen. That day taught him a valuable lesson, which he passed on to me, ‘Go through a checklist for cross-browser testing before going live’.

该网站在移动设备上一团糟，所有元素都已消失，徽标甚至不适合显示在屏幕上。 那天，他教给他一个宝贵的教训，他将这一教训传递给我：“ 在上线之前，要通过跨浏览器的检查清单 ”。

Cross-browser testing is very necessary in this digital world where everyone is browsing the web on a different platform, OS, browser, and you can’t even think of that beforehand. Formulating a perfect cross-browser testing strategy might help you in that but sometimes even after that you need to be prepared for some un-welcomed bugs. However, a proper checklist might help you avoid them or figure them out before anyone else does.

在这个数字世界中，跨浏览器测试是非常必要的，每个人都在不同的平台，操作系统，浏览器上浏览网络，而您甚至无法想到这一点。 制定一个完善的跨浏览器测试策略可能会对此有所帮助，但有时甚至在此之后，您还需要为一些不受欢迎的错误做好准备。 但是，适当的清单可能会帮助您避免使用它们或在其他任何人之前将它们弄清楚。

通过清单之前的一些先决条件 (A Few Pre-Requirements Before Going Through the Checklist)

Before going on to the checklist you need to make sure that you know how to perform cross-browser testing.

在继续检查清单之前，需要确保您知道如何执行跨浏览器测试。

1. If you are going to perform cross-browser tests, you need to know what browsers and devices you are going to test on. So, formulate a proper cross-browser testing strategy.

   如果要执行跨浏览器测试，则需要知道要在哪些浏览器和设备上进行测试 。 因此，制定适当的跨浏览器测试策略。

2. When you have your cross-browser testing strategy, make sure you test your locally hosted website or dev site on cross-browser testing tools like LambdaTest before going live. The platform has a feature called Lambda Tunnel that gives you the flexibility to connect your locally hosted websites or web apps to test in the cloud for cross-browser testing using SSH tunnel. Cross-browser compatibility and cross-browser accessibility affects your website’s SEO as well therefore it’s always important to get it thoroughly tested and perfectly compatible for site indexing on search engines.

   当您具有跨浏览器测试策略时，请确保在上线之前使用LambdaTest等跨浏览器测试工具测试本地托管的网站或开发站点。 该平台具有称为Lambda隧道的功能，可让您灵活地连接本地托管的网站或Web应用程序以在云中进行测试，以使用SSH隧道进行跨浏览器测试。 跨浏览器的兼容性和跨浏览器的可访问性也会影响您网站的SEO，因此，对其进行全面测试并与搜索引擎上的网站索引完全兼容始终非常重要。

3. Keep mobile devices handy, or you can also set up emulators or simulators. Or you can use a platform that can provide you all the devices you need, like LambdaTest which provides a wide range of iOS and Android mobile devices to test upon.随身携带移动设备，或者您也可以设置模拟器。 或者，您可以使用一个平台，该平台可以为您提供所需的所有设备，例如LambdaTest，它可以提供广泛的iOS和Android移动设备进行测试。

Once done with the prerequisites, the next step is to go through the checklist.

完成前提条件后，下一步就是检查清单。

跨浏览器测试的最终清单在上线之前 (The Ultimate Checklist For Cross-browser Tests Before Going Live)

This helpful checklist will help you make sure you’ve dotted your i’s and crossed your t’s and tested all your various elements before going live in your local environment.

这份有用的清单将帮助您确保在本地环境中工作之前，已点出i并划线了t并测试了所有各种元素。

所有浏览器中元素的对齐 (Alignment of Elements in All Browsers)

Make sure that the elements are in the correct place that you intend them to be in.

确保元素位于您要放置的正确位置。

在各种浏览器中验证SSL (Verification of SSL in Various Browsers)

If you have faced this error, one of the reasons can be that your website’s SSL certificate doesn’t support some of the browser versions. If your user try to access your website those browser versions, then they might not be able to access it at all. So, check your website’s SSL certificates in all browsers before going live.

如果遇到此错误，则原因之一可能是您网站的SSL证书不支持某些浏览器版本。 如果您的用户尝试访问那些浏览器版本的网站，则他们可能根本无法访问它。 因此，在上线之前，请在所有浏览器中检查网站的SSL证书。

在不同的浏览器中渲染字体 (Rendering of Font in Different Browsers)

Who don’t love beautiful fonts on their website, however they can cause blunders if they don’t render properly. Rendering of fonts is highly affected by the browser in which your site is being browsed. So, you need to make sure that your fonts render the same in every web browser.

谁不喜欢他们网站上漂亮的字体，但是如果渲染不正确，它们可能会导致错误。 字体的渲染在很大程度上受浏览器所影响。 因此，您需要确保您的字体在每个Web浏览器中都呈现相同的字体。

Read more on Fonts and Browser Compatibility.

阅读有关字体和浏览器兼容性的更多信息 。

媒体元素与各种浏览器的兼容性 (Compatibility of Media Elements with Diverse Browsers)

Videos are the most loved form of media nowadays. Web designers and developers have been taking advantage of the fact and you can easily find either a demo video or some tutorial video running on the homepage of a website. But browser compatibility can cause you trouble if you some use unsupported media elements and that’s not restricted just to videos, but to images as well. So before going live make sure that you use those elements that are supported in all browsers or you have a fallback for unsupported elements so that your users don’t face this!

视频是当今最受欢迎的媒体形式。 Web设计人员和开发人员一直在利用这一事实，您可以轻松地在网站首页上找到演示视频或一些教程视频。 但是，如果您使用了不受支持的媒体元素，那么浏览器兼容性可能会给您带来麻烦，不仅限于视频，而且还限于图像。 因此，在上线之前，请确保使用所有浏览器都支持的元素，或者对不支持的元素进行后备，以免用户遇到这种情况！

Understand Multimedia compatibility with Different Browsers in detail in here.

在此处详细了解多媒体与不同浏览器的兼容性 。

您的API是否已在所有浏览器中连接？ (Are Your APIs Connected in All Browsers?)

API calls are also dependent upon browsers. Some browsers acknowledges API requests while others might avoid this or throw you an error. Before going live, always be sure that the APIs that you’re using are connected in every browser. Because there are some browsers like Opera Mini that don’t support APIs like Websocket.

API调用也取决于浏览器。 一些浏览器会确认API请求，而另一些浏览器可能会避免这种情况或引发错误。 在上线之前，请务必确保在所有浏览器中都连接了您正在使用的API。 因为有些浏览器(例如Opera Mini)不支持Websocket等API。

Also some API call methods like getUserMedia/Stream will throw you an error on Opera Mini, iOS Safari 10.3, IE 11. So, you need to be sure that your APIs are browser compatible before going live else when you are on the public server your users might face unconnected to the worlds.

另外，某些API调用方法(例如getUserMedia/Stream也会在Opera Mini，iOS Safari 10.3，IE 11上引发错误。因此，在公共服务器上运行其他版本之前，您需要确保您的API与浏览器兼容，然后才能上线用户可能会面对与世界无关的问题。

确保您验证CSS和HTML (Make Sure You Validate Your CSS And HTML)

Tags left open can be nightmares for developers and horrifying for the users if they see the code live on screen. So, it’s mandatory to make sure that the code is clean and properly validated. W3schools have a soft corner for the same. You can easily validate your HTML,JS, and CSS before going live on tools like W3C Markup validation service, Free Formatter or JS Formatter, W3C CSS Validation Service – W3 Jigsaw or CSS Validation Service.

如果开发人员看到代码实时显示在屏幕上，那么开放的标签可能会成为开发人员的噩梦，也可能使用户感到恐惧。 因此，必须确保代码干净并经过正确验证。 W3schools有一个软的角落。 在使用诸如W3C标记验证服务，Free Formatter或JS Formatter，W3C CSS验证服务– W3拼图或CSS验证服务之类的工具之前，您可以轻松地验证HTML，JS和CSS。

Browser Compatibility issues can be found to a greater extent using these tools and you can further proceed with solving them.

使用这些工具可以更大程度地发现浏览器兼容性问题，您可以进一步解决它们。

Read more on Finding Cross-browser Compatibility Issues in HTML and CSS.

阅读有关在HTML和CSS中查找跨浏览器兼容性问题的更多信息。

After checking out all the major compatibility issues, you need to perform a round of cross-browser testing in general taking of minor but important factors like:

在检查了所有主要的兼容性问题之后，您通常需要考虑一些次要但重要的因素，从而执行一轮跨浏览器测试：

• Alignment of elements: Are all the elements aligned the way you want them to.

  元素对齐：是否所有元素都按照您希望的方式对齐。

• Pop Ups: Check if the pop ups are being displayed properly and are opening in all browsers.

  弹出窗口：检查弹出窗口是否正确显示并在所有浏览器中都打开。

• Alignment of checkboxes: Checkboxes can cause problems in many browsers. Make sure that your checkboxes are aligned and in proper working condition.

  复选框的对齐：复选框可能会在许多浏览器中引起问题。 确保您的复选框对齐并处于正常工作状态。

• Alignment and functioning of Buttons: Buttons hold a major part when it comes to CTAs or any other action so you need to be sure that they are aligned and properly working across diverse browsers.

  按钮的对齐和功能：在涉及CTA或任何其他操作时，按钮起着主要作用，因此您需要确保它们是对齐的并且可以在各种浏览器上正常工作。

• URLs redirection from buttons: Check the links to which the buttons are redirecting.

  从按钮重定向URL：检查按钮重定向到的链接。

• Drop down Menus: Verify that the drop downs work as expected across all browsers.

  下拉菜单：确认下拉菜单在所有浏览器中都能正常工作。

• Forms and Form APIs: Make sure that the forms take in data and the data is transferred to the collecting API endpoint intact.

  表单和表单API：请确保表单接收数据，并且将数据完整地传输到收集API端点。

• Grids/Tables: Check the alignment and location of tables and grids if any across every browser.

  表格/表格：检查表格和表格在所有浏览器中的对齐方式和位置。

• Sessions and cookies: If your website uses cookies, verify that the prompt is there and it works accordingly.

  会话和cookie：如果您的网站使用cookie，请验证提示是否存在并且可以正常工作。

• Dates: Test if the date formats as decided in every browser.

  日期：测试是否在每个浏览器中确定日期格式。

• Zoom in and Zoom out functionality: Check if the zoom in and zoom out functionality works properly and doesn’t break the UI when in action.

  放大和缩小功能：检查放大和缩小功能是否正常运行，并且在使用时不会破坏UI。

• Appearance of scroll: Check if the scroll is present on both horizontal and vertical bars and is functional.

  滚动条的外观：检查滚动条是否同时出现在水平条和垂直条上并且功能正常。

• Flash: Make sure that Flash supported videos, animations, RIAs, and applications work cross-browser.

  Flash：请确保Flash支持的视频，动画，RIA和应用程序可以跨浏览器运行。

• HTML animations: Verify if your animations load across all browsers.

  HTML动画：验证您的动画是否在所有浏览器中加载。

• Mouse hovering: Check if the mouse adjusts to the button, text box, link, and white space accordingly.

  鼠标悬停：检查鼠标是否相应地适应了按钮，文本框，链接和空白。

• Image alignment: Make sure that all the images are aligned and in place across different browsers.

  图像对齐：确保所有图像在不同的浏览器中对齐并放置在适当的位置。

• Alt tags: Alt-tags are again important and we need to be sure that they are in place.

  Alt标签： Alt标签又很重要，我们需要确保它们就位。

And everything else that you can think of in every possible browser, OS, and device combination.

您可以在每种可能的浏览器，操作系统和设备组合中想到的所有其他内容。

As we can see here, there are various things to be tested in a local environment across thousands of combinations for making sure it doesn’t hinder the experience of the users once the website is made live. So, we need to make sure that we test on all possible combinations to avoid further surprises. Since, many of the following tests are repetitive and time consuming, so we can make use of an online Selnium grid for automating cross-browser tests. With such automation, you can avoid repetitive and time consuming tasks and automate them using a simple script.

正如我们在这里看到的那样，在本地环境中有数千种组合需要测试各种事物，以确保一旦启用网站，就不会妨碍用户的使用体验。 因此，我们需要确保对所有可能的组合进行测试，以避免进一步的意外。 由于以下许多测试都是重复性且耗时的，因此我们可以利用在线Selnium网格来自动化跨浏览器测试 。 借助这种自动化，您可以避免重复和费时的任务，并使用简单的脚本将其自动化。

LambdaTest also provides you an online selenium grid on which you can automate your tests on both public and local servers and test on LambdaTest cloud grid of more than 2000 devices, browsers, browser versions, and resolution combinations. Hence, yoou need to make sure that you find the best cross-browser testing tool and then you can perform tests on your checklist, some manually while others using automation.

LambdaTest还为您提供了一个在线Selenium网格 ，您可以在该网格上自动化在公共和本地服务器上的测试，以及在LambdaTest云网格上测试的2000多种设备，浏览器，浏览器版本和分辨率组合。 因此，您需要确保找到最佳的跨浏览器测试工具，然后才能在清单上执行测试，有些需要手动执行，有些则需要自动化。

Once you’re done with testing this cross-browser testing checklist, you’re all set to go live and hit the green button. I hope you might not face the situation like my friend because you’re smart enough not to repeat the same mistake.

测试完此跨浏览器测试清单后，您就可以投入使用并点击绿色按钮。 我希望您可能不会像我的朋友那样面对这种情况，因为您足够聪明，不会重蹈覆辙。

Let us know if I missed something that should be included in the checklist in the comments section below!

让我们知道我是否错过了以下评论部分清单中应包括的内容！

Till then, happy testing and all the best for the launch!

到那时，祝您测试愉快，一切顺利！

翻译自: https://www.sitepoint.com/cross-browser-testing-checklist/

系统上线发布清单