End to end (e2e) testing là một phương pháp kiểm thử phần mềm được sử dụng để kiểm tra xem luồng ứng dụng có hoạt động như mong đợi từ đầu đến cuối hay không.
Mặc định Angular CLI đã xây dựng sẵn cho chúng ta một bộ khung e2e hoàn chỉnh với Protractor và Jasmine.
Một ví dụ minh hoạ về e2e testing trong Angular 7:
Trong Angular chúng ta chỉ cần chạy câu lệnh ng new là các files e2e sẽ được tạo ra cũng ứng dụng.
Tất cả mọi thứ liên quan đến e2e testing đều được đặt trong folder /e2e. Chúng ta cũng có thể thực hiện viết test luôn mà không cần thay đổi bất kỳ cài đặt mặc định nào trong protractor.conf.js và tsconfig.e2e.json. Ngoài 2 files config trên thì chúng ta cũng có thêm 1 subfolder nữa là /src. Trong folder này mặc định sẽ có 2 files:
- app.e2e-spec.ts — là một file spec chuyên thực thi kịch bản các bước trong ứng dụng của chúng ta. File này được viết bằng cú pháp Jasmine (https://jasmine.github.io/pages/docs_home.html)
- app.po.ts — là một file Page Object chuyên tương tác với các elements có trong page hiện tại (Ví dụ như điền nội dung vào một ô textbox hay click vào một nút nào đó). Các đoạn code tương tác này đều phải được viết trong các phương thức (methods), sau đó bên file spec sẽ gọi tới các phương thức này để thực thi kịch bản.
Mặc định Angular đã cho chúng ta sẵn một vài đoạn code để chúng ta dễ hình dung hơn về e2e:
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token keyword">import</span> <span class="token punctuation">{</span> browser<span class="token punctuation">,</span> by<span class="token punctuation">,</span> element <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'protractor'</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">AppPage</span> <span class="token punctuation">{</span> <span class="token function">navigateTo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> browser<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'/'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">getParagraphText</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">element</span><span class="token punctuation">(</span>by<span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">'app-root h1'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getText</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span class="token keyword">import</span> <span class="token punctuation">{</span> AppPage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./app.po'</span><span class="token punctuation">;</span> <span class="token function">describe</span><span class="token punctuation">(</span><span class="token string">'workspace-project App'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">let</span> page<span class="token punctuation">:</span> AppPage<span class="token punctuation">;</span> <span class="token function">beforeEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> page <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">AppPage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">it</span><span class="token punctuation">(</span><span class="token string">'should display welcome message'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> page<span class="token punctuation">.</span><span class="token function">navigateTo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">expect</span><span class="token punctuation">(</span>page<span class="token punctuation">.</span><span class="token function">getParagraphText</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toEqual</span><span class="token punctuation">(</span><span class="token string">'Welcome to My App!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Sau khi đã hoàn thành xong 2 files là app.e2e-spec.ts và app.po.ts, chúng ta sẽ cần phải chạy câu lệnh:
1 2 | ng e2e |
Câu lệnh này sẽ:
- Thực thi các spec được viết trong app.e2e-spec.ts lên trình duyệt (mặc định sẽ là Chrome, đồng thời khi chạy trình duyệt sẽ có thông báo là “Chrome is being controlled by automated test software”)
- Đưa ra màn hình console các kết quả khi thực thi các spec ở trên. Ví dụ:
Chạy e2e testing với chế độ headless
Khi chạy ở chế độ headless, trình duyệt sẽ không tự động mở ra như khi chạy bình thường. Điều này sẽ phù hợp nếu chúng ta chạy nó cho mục đích Continues Integration (CI). Để làm được vậy chúng ta cần phải cập nhật lại file protractor.conf.js như sau:
1 2 3 4 5 6 7 8 | capabilities<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token string">'browserName'</span><span class="token punctuation">:</span> <span class="token string">'chrome'</span><span class="token punctuation">,</span> chromeOptions<span class="token punctuation">:</span> <span class="token punctuation">{</span> binary<span class="token punctuation">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">CHROME_BIN</span><span class="token punctuation">,</span> args<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'--headless'</span><span class="token punctuation">,</span> <span class="token string">'--no-sandbox'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
Và cuối cùng, thay vì chạy ng e2e thì chúng ta sẽ chạy câu lệnh:
1 2 | ng e2e --capabilities.chromeOptions.args="--headless" |
Một vài selectors hay dùng trong protractor
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <span class="token function">element</span><span class="token punctuation">(</span>by<span class="token punctuation">.</span><span class="token function">id</span><span class="token punctuation">(</span><span class="token string">'firstName'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">element</span><span class="token punctuation">(</span>by<span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">'.signout'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">element</span><span class="token punctuation">(</span>by<span class="token punctuation">.</span><span class="token function">model</span><span class="token punctuation">(</span><span class="token string">'address.city'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">element</span><span class="token punctuation">(</span>by<span class="token punctuation">.</span><span class="token function">binding</span><span class="token punctuation">(</span><span class="token string">'address.city'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">element</span><span class="token punctuation">(</span>by<span class="token punctuation">.</span><span class="token function">input</span><span class="token punctuation">(</span><span class="token string">'firstName'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">element</span><span class="token punctuation">(</span>by<span class="token punctuation">.</span><span class="token function">input</span><span class="token punctuation">(</span><span class="token string">'firstName'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">element</span><span class="token punctuation">(</span>by<span class="token punctuation">.</span><span class="token function">buttonText</span><span class="token punctuation">(</span><span class="token string">'Close'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">element</span><span class="token punctuation">(</span>by<span class="token punctuation">.</span><span class="token function">partialButtonText</span><span class="token punctuation">(</span><span class="token string">'Save'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">element</span><span class="token punctuation">(</span>by<span class="token punctuation">.</span><span class="token function">linkText</span><span class="token punctuation">(</span><span class="token string">'Save'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">element</span><span class="token punctuation">(</span>by<span class="token punctuation">.</span><span class="token function">partialLinkText</span><span class="token punctuation">(</span><span class="token string">'Save'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">element</span><span class="token punctuation">(</span>by<span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">'img[src*='</span>assets<span class="token operator">/</span>img<span class="token operator">/</span>profile<span class="token punctuation">.</span>png<span class="token string">']'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">element</span><span class="token punctuation">(</span>by<span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">'.pet .cat'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">element</span><span class="token punctuation">(</span>by<span class="token punctuation">.</span><span class="token function">cssContainingText</span><span class="token punctuation">(</span><span class="token string">'.pet'</span><span class="token punctuation">,</span> <span class="token string">'Dog'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> allColors <span class="token operator">=</span> element<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span>by<span class="token punctuation">.</span><span class="token function">options</span><span class="token punctuation">(</span><span class="token string">'c c in colors'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Thao tác với Input
1 2 3 4 5 6 7 8 9 10 | <span class="token function">element</span><span class="token punctuation">(</span>by<span class="token punctuation">.</span><span class="token function">id</span><span class="token punctuation">(</span><span class="token string">'firstName'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">sendKeys</span><span class="token punctuation">(</span><span class="token string">"John"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">sendKeys</span><span class="token punctuation">(</span>Key<span class="token punctuation">.</span><span class="token constant">ENTER</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">sendKeys</span><span class="token punctuation">(</span>Key<span class="token punctuation">.</span><span class="token constant">TAB</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">sendKeys</span><span class="token punctuation">(</span>Key<span class="token punctuation">.</span><span class="token constant">BACK_SPACE</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">element</span><span class="token punctuation">(</span>by<span class="token punctuation">.</span><span class="token function">id</span><span class="token punctuation">(</span><span class="token string">'user_name'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Truy cập vào các phần tử trong list
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="token keyword">var</span> list <span class="token operator">=</span> element<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span>by<span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span>'<span class="token punctuation">.</span>items<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> list2 <span class="token operator">=</span> element<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span>by<span class="token punctuation">.</span><span class="token function">repeater</span><span class="token punctuation">(</span><span class="token string">'personhome.results'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">expect</span><span class="token punctuation">(</span>list<span class="token punctuation">.</span><span class="token function">count</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">expect</span><span class="token punctuation">(</span>list<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getText</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span>'First’<span class="token punctuation">)</span> <span class="token function">expect</span><span class="token punctuation">(</span>list<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getText</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span>'Second’<span class="token punctuation">)</span> <span class="token function">expect</span><span class="token punctuation">(</span>list<span class="token punctuation">.</span><span class="token function">first</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getText</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span>'First’<span class="token punctuation">)</span> <span class="token function">expect</span><span class="token punctuation">(</span>list<span class="token punctuation">.</span><span class="token function">last</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getText</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span>'Last’<span class="token punctuation">)</span> |
Tài liệu tham khảo: Automate End to end (e2e) testing for Angular 7 using Protractor & Jasmine