angular 測試
I recently planned a major CSS refactoring project to transition a large e-commerce site from an antiquated 1024px design to a more modern, responsive design.
我最近計劃了一個大型CSS重構項目，以將大型電子商務站點從過時的1024px設計過渡到更現代的響應式設計。
This situation is of course not unique. Responsive design has officially made it's way from UX blogs to the corner office - the web will henceforth be stretchy.
這種情況當然不是唯一的。 響應式設計已正式成為從UX博客到角落辦公室的一種方式-網絡將因此變得捉襟見肘。
As we enter this era of building for multi-device usability it's important to mitigate the common pitfalls of responsive development, which, among others, include:
隨著我們進入構建多設備可用性的時代，減輕響應式開發的常見陷阱非常重要，其中包括：
The responsive multiplier effectIf you are one who thought css was quirky before, then you may want to sit down for this: Retrofitting your site with new responsive breakpoints will multiply that mystery by 2, or 3 or more - especially if you are not able to use a battle-tested framework like Bootstrap or foundation etc...
響應乘數效應如果您以前認為CSS很古怪，那麼您可能需要坐下來：用新的響應斷點改造您的網站會使該謎團增加2或3或更多-特別是如果您不能使用經過Bootstrap或Foundation等經過戰鬥驗證的框架...
Sleeping dragonsEven if you have the luxury of starting your css project from scratch, when developing your css, mistakes often happen in breakpoints you can't see. For example, when tweaking a mobile view, the desktop view may get a regression - and because visual testing requires physically manipulating the size and and scroll position of the browser viewport, it's just not possible for a developer to catch everything.
沉睡的巨龍即使您有足夠的精力從頭開始創建CSS項目，但在開發CSS時，錯誤通常會在您看不到的斷點處發生。 例如，當調整移動視圖時，桌面視圖可能會回歸-並且由於視覺測試需要物理地操縱瀏覽器視口的大小和滾動位置，因此開發人員無法捕獲所有內容。
Death by a thousands bugsIf you are not automating visual regression testing, A big refactor job can easily overwhelm a QA group with an unnecessarily high count of CSS bugs in a single sprint.
數以千計的bug導致的死亡如果您不執行視覺回歸測試的自動化，那麼大量重構工作很容易使QA組不堪重負，並且在一次衝刺中不必要地增加了CSS bug的數量。
The responsible thing to do given these exposures is to mitigate visual bugs through automated visual testing - that is in this case, to programmatically compare renderings of responsive content at different viewport sizes to ensure changes made at one screensize won't break a layout at another screen size. Automating this process is key - because your computer never gets tired of comparing the same design over and over. This is critical to reducing bugs going to your QA process, or worse, to production.
考慮到這些風險，要做的事情是通過自動的視覺測試來減輕視覺錯誤-在這種情況下，以編程方式比較不同視口大小的響應內容的渲染，以確保在一個屏幕尺寸下所做的更改不會破壞另一個屏幕上的布局屏幕尺寸。 自動化此過程非常關鍵-因為您的計算機永遠不會厭倦一遍又一遍地比較相同的設計。 這對於減少進入質量檢查流程或更糟糕的生產環境的錯誤至關重要。
This is where BackstopJS comes in. BackstopJS is a straightforward, config-based tool which makes it easy for a developer to automate visual testing of multiple URLs at multiple screen sizes. Here's the basic idea:
這就是BackstopJS的用武之地。BackstopJS是一個簡單的，基於配置的工具，使開發人員可以輕鬆地以多種屏幕尺寸自動對多個URL進行視覺測試。 這是基本思想：
First, take reference screenshotsOnce you have a working CSS implementation, BackstopJS takes a set of reference screenshots. These screenshots will be saved for later comparisons.
首先，獲取參考屏幕截圖一旦您具有有效CSS實施，BackstopJS就會獲取一組參考屏幕截圖。 這些屏幕截圖將被保存以供以後比較。
Test your CSS after making changes:Let's say in step 1 above, you had a perfect desktop view and you then started working on a mobile view. After working on your mobile view, you can run a test to ensure none of your changes on mobile have broken your desktop view.
進行更改後測試CSS：假設在上面的步驟1中，您擁有一個完美的桌面視圖，然後開始使用移動視圖。 在使用行動裝置視圖之後，可以運行測試以確保在行動裝置上所做的任何更改都不會破壞桌面視圖。
RepeatYou can continue repeating the reference/test process to ensure you're always moving forward in all views.
重複您可以繼續重複參考/測試過程，以確保在所有視圖中始終保持前進。
This approach becomes even more effective when making changes to existing projects where you want to ensure adding a new feature to existing designs won't disrupt other areas.
當您要更改現有項目時，如果要確保在現有設計中添加新功能不會干擾其他領域，這種方法將變得更加有效。
The original use-case for BackstopJS was testing multiple static web pages, so initially, it would render a screenshot just after a requested page was loaded. This worked great for big, primarily static server side apps, but what about single page applications and pages which use progressive enhancement? These are cases where we need to explicitly tell BackstopJS when the page is ready of it's "closeup".
BackstopJS的原始用例是測試多個靜態網頁，因此最初，它將在加載請求的頁面後呈現屏幕截圖。 這對於大型的，主要是靜態伺服器端應用程式非常有用，但是單頁應用程式和使用漸進增強功能的頁面又如何呢？ 在這些情況下，我們需要在頁面準備好「特寫」時明確告訴BackstopJS。
In it's latest release (0.4.0), BackstopJS addresses this conundrum with two new config options: readyEvent and delay. The readyEvent specifies a string (that is logged to the console by your app) to wait for before taking a screencapture. The delay parameter specifies a duration (in milliseconds) to wait for before taking a screencapture. They can also be used together, in which case BackstopJS first waits for the readyEvent then waits for the additional duration of the delay parameter to take the screenshot.
在最新版本(0.4.0)中， readyEvent通過兩個新的配置選項解決了這個難題： readyEvent和delay 。 readyEvent指定一個字符串(由您的應用程式記錄到控制臺)在獲取屏幕截圖之前要等待。 delay參數指定在進行屏幕捕獲之前要等待的持續時間(以毫秒為單位)。 它們也可以一起使用，在這種情況下，BackstopJS首先等待readyEvent， 然後等待delay參數的其他持續時間以截取屏幕截圖。
An obvious scenario where you would want to wait before taking a screenshot is when you're waiting for an ajax call to complete and send information to the view. But a more interesting (and possibly more tricky) scenario may be when waiting for an interstitial animation to complete. Lets take a look at that case...
在等待截屏之前需要等待的一個明顯情況是，您正在等待ajax調用完成並向視圖發送信息。 但是，更有趣的(可能更棘手的)情況可能是在等待插頁式動畫完成時。 讓我們來看看這種情況...
Please note: this exercise requires Node and NPM to be installed, more info here
請注意：此練習需要安裝Node和NPM， 更多信息請點擊這裡
I've prepared a simple AngularJS app for us to test. Download the myAngularProject.zip file here and expand the project somewhere in your dev environment.
我準備了一個簡單的AngularJS應用程式供我們測試。 在此處下載myAngularProject.zip文件，然後在您的開發環境中的某個位置擴展該項目。
Lets look at the project directory:
讓我們看一下項目目錄：
This is the simple AngularJS project we will work on. Next step is to install BackstopJS. In your terminal, cd to your ./myAngularProject location and run
這是我們將要進行的簡單AngularJS項目。 下一步是安裝BackstopJS。 在終端中， cd到您的./myAngularProject位置並運行
$ npm install backstopjs
The above command will create the folder structure ./node_modules/backstopjs within ./myAngularProject as in the figure below.
上面的命令將在./myAngularProject創建文件夾結構./node_modules/backstopjs ，如下圖所示。
There are three other dependencies for BackstopJS. They are currently not included in the BackstopJS package.
BackstopJS還有其他三個依賴項。 它們當前不包含在BackstopJS包中。
If you don't already have a current global Gulp instance...
如果您還沒有當前的全局Gulp實例...
$ sudo npm install -g gulp
If you don't already have a current global PhantomJS install...
如果您還沒有當前的全局PhantomJS安裝...
$ sudo npm install -g phantomjs
If you don't already have a current global CasperJS install…
如果您還沒有當前的全球CasperJS安裝…
$ sudo npm install -g casperjs
Lets look at the page we will test. Open up ./simple.html.
讓我們看一下我們要測試的頁面。 打開./simple.html 。
This is the file we will use for our test demonstration. It consists of a heading and two grey boxes of content. Simple enough...
這是我們將用於測試演示的文件。 它由標題和內容的兩個灰色框組成。 很簡單...
Now lets look at the backstopjs config file. Open up ./backstop.json
現在，讓我們看一下backstopjs配置文件。 打開./backstop.json
This is the config file which BackstopJS looks for when running tests on your project. The first node: viewports takes a list of viewport objects consisting of a name and the dimensions of the viewport we are simulating - in this case we are setting three sizes. The second node: scenarios is a list of scenarios for the test where we specify the testName, url, DOM selectors we want to test and optional readyEvent and delay parameters.
這是在項目上運行測試時BackstopJS查找的配置文件。 第一個節點： viewports獲取視口對象的列表，該對象由名稱和我們要模擬的視口的尺寸組成-在這種情況下，我們將設置三個大小。 第二個節點： scenarios是測試的情境列表，其中我們指定要測試的testName ， url ，DOM selectors以及可選的readyEvent和delay參數。
Please take note: the URL parameter works like anchor tag href property. If you begin the file path string with http:// you will pull a page at a specified internet domain. If you simply enter test/simple.html you will be making a relative file request which is relative to the ./node_modules/backstopjs/ directory, e.g., ../../simple.html refers to the file at the root of myAngularProject.
請注意：URL參數的作用類似於錨標籤href屬性。 如果以http://開頭文件路徑字符串，則將在指定的Internet域上拉一個頁面。 如果僅輸入test/simple.html您將提出相對於./node_modules/backstopjs/目錄的相對文件請求，例如../../simple.html引用myAngularProject根目錄下的文件。
So, with our project in place and BackstopJS loaded, Lets get to it.
因此，在我們的項目就位並加載BackstopJS之後，讓我們開始吧。
First, make sure you working directory is ./myAngularProject/node_modules/backstopjs
首先，確保您的工作目錄為./myAngularProject/node_modules/backstopjs
Next, Create reference files for the project...
接下來，為項目創建參考文件...
$ gulp reference
...and immediately run a test:
...並立即運行測試：
$ gulp test
When the test sequence ends BackstopJS should open up the results in Chrome. Since we didn't make any changes between our reference screens and our test screens everything should pass...
測試序列結束後，BackstopJS應該在Chrome中打開結果。 由於我們沒有在參考屏幕和測試屏幕之間進行任何更改，因此所有內容都應通過...
Now let's make a change. Open up simple.html again and uncomment lines 30 through 38. This will add a dazzling animation to our simple app.
現在讓我們進行更改。 再次打開simple.html並取消注釋第30至38行。這將為我們的簡單應用程式添加令人眼花animation亂的動畫。
And you should see...
你應該看到...
I know. Dazzling right?
我知道。 耀眼吧？
So lets test this. We should get a very different result...
因此，讓我們測試一下 。 我們應該得到截然不同的結果...
$ gulp test
So don't panic - this is completely expected. Those elements are missing because our screenshot was taken just as the page finished loading. But we need to wait a little bit until our animation is complete to take our screenshots.
所以不要驚慌-這是完全可以預期的。 這些元素丟失了，因為我們的截圖是在頁面加載完成時拍攝的。 但是，我們需要稍等片刻，直到完成動畫以截取屏幕截圖。
So how long should we wait? With web development, in practice, most of the time we don't know. There usually are all kinds of asynchronous things going on in most web apps and it's really best if the app can determine when all dependent activity (e.g. ajax calls, animations, font loading etc.) is complete - then send a signal.
那我們要等多久？ 實際上，通過Web開發，大多數時候我們都不知道。 通常，大多數Web應用程式中會發生各種異步事件，如果應用程式可以確定何時完成所有依賴的活動(例如ajax調用，動畫，字體加載等)，然後發送信號，則是最好的選擇。
In our case it's already been done. Our Angular app is listening to the animationEnd event of the second content block and logging the text backstop.ready to the console.
在我們的情況下，它已經完成了。 我們的Angular應用程式正在監聽第二個內容塊的animationEnd事件，並將文本backstop.ready記錄到控制臺。
Let's take advantage of this and update our backstop.json config to let BackstopJS know when the app is really ready to be evaluated.
讓我們利用這一點並更新我們的backstop.json配置，以使BackstopJS知道何時真正準備好對該應用程式進行評估。
Open up ./backstop.json again and change the readyEvent parameter to "backstop.ready"
再次打開./backstop.json並將readyEvent參數更改為「 readyEvent "backstop.ready"
Now let's try it again.
現在讓我們再試一次。
First, "bless" our config change... (see note below on gulp bless*)
首先， 「祝福」我們的配置更改...(請參閱以下有關gulp bless *的注釋)
$ gulp bless
And second, re-run our new and improved test...
其次，重新運行我們經過改進的新測試...
$ gulp test
And Viola! (And by "Viola" I mean, the tests should have all passed.)
還有中提琴！ (我的意思是「中提琴」，所有測試都應該通過了。)
We could have used the delay property instead -- go ahead and set the readyEvent to null and change the delay value to 2000. See what happens.
我們本來可以使用delay屬性-繼續，將readyEvent設置為null並將delay值更改為2000。看看會發生什麼。
In the end, you may prefer the event method or the delay method or both. it's up to you to decide which is the best method for you to use.
最後，您可能更喜歡事件方法或延遲方法，或兩者兼而有之。 由您決定哪種方法最適合您。
At this point, some of you may be thinking, hey Garris, BackstopJS is a cool tool and all, but you didn't show how it finds responsive bugs. The reason for that is there are already demos out there illustrating that subject. With this demo I wanted to highlight the special (and maybe non-obvious) considerations around visual testing for client-side apps (as opposed to server-side apps).
此時，您可能有些人在想， 嘿，加裡斯，BackstopJS以及所有工具都很酷，但是您並未展示它如何找到響應性錯誤 。 原因是那裡已經有演示該主題的演示。 在此演示中，我想重點介紹針對客戶端應用程式(與伺服器端應用程式)進行視覺測試的特殊(也許不是顯而易見的)注意事項。
This technique can be used in all kinds of SPAs, progressive enhancement scenarios and 3rd party widgets (e.g. Twitter, Facebook, stocks, weather, hero image sliders, etc.)
該技術可用於各種SPA，漸進增強方案和第三方小部件(例如Twitter，Facebook，股票，天氣，英雄圖像滑塊等)。
As with most testing methods it really helps to have data stubs to make sure that you're comparing apples to apples every time. That said, for cases where that isn't possible, BackstopJS also accepts a blacklist of DOM selectors, so you can choose to ignore things like banners or other dynamic content - more info in the documentation.
與大多數測試方法一樣，使用數據存根確實可以確保每次都比較一個蘋果。 也就是說，在不可能的情況下，BackstopJS也接受DOM選擇器黑名單，因此您可以選擇忽略橫幅或其他動態內容之類的東西- 文檔中的更多信息 。
BackstopJS is optimized for testing a large number of pages (or URL states if it's an SPA). As opposed to going for deep interactions BackstopJS is meant more as a sanity check you can actively use during CSS development.
BackstopJS已針對測試大量頁面進行了優化(如果是SPA，則為URL狀態)。 與進行深層交互相反，BackstopJS的含義更多是可以在CSS開發期間積極使用的健全性檢查。
For more deeper visual app testing, (including intermediate states and micro interactions) I recommend trying PhantomCSS or writing your own CasperJS scripts. If you've followed this tutorial then you already have many of tools you need loaded on your machine.
為了進行更深入的視覺應用測試(包括中間狀態和微交互)，我建議嘗試PhantomCSS或編寫自己的CasperJS腳本。 如果您已按照本教程進行操作，則您已經在計算機上加載了許多需要加載的工具。
I've found that once I got used to automating visual testing it's hard to start a new large project without it.
我發現一旦習慣了自動化視覺測試，沒有它就很難啟動一個新的大型項目。
I'd love to hear from you if you are using BackstopJS in your development group. Drop a line to let me know! @garris
如果您在開發小組中使用BackstopJS，我很想聽聽您的意見。 下一行讓我知道！ @加裡斯
* In most cases you would want to re-run gulp reference when updating a config file. For this demo here we are overriding that behavior. We do this with gulp bless as shown above.
*在大多數情況下，更新配置文件時，您需要重新運行gulp reference 。 對於此演示，我們將覆蓋該行為。 如上所示，我們用大gulp bless做到這一點。
翻譯自: https://davidwalsh.name/visual-regression-testing-angular-applications
angular 測試