Cách tự động hóa mã HTML

Trong suốt mô-đun này, chúng tôi đã trình bày chi tiết nhiều cách khác nhau để bạn có thể kiểm tra trang web và ứng dụng của mình, đồng thời giải thích loại phạm vi mà các nỗ lực kiểm tra trình duyệt chéo của bạn nên có về trình duyệt sẽ kiểm tra, cân nhắc về khả năng truy cập, v.v. Nghe có vẻ như rất nhiều công việc, phải không?

Chúng tôi đồng ý — thử nghiệm tất cả những thứ chúng tôi đã xem xét trong các bài viết trước theo cách thủ công có thể là một điều khó khăn thực sự. May mắn thay, có những công cụ giúp chúng ta tự động hóa phần nào nỗi đau này. Có hai cách chính để chúng ta có thể tự động hóa các bài kiểm tra mà chúng ta đã nói đến trong mô-đun này

1. Sử dụng một trình chạy tác vụ chẳng hạn như tập lệnh Grunt hoặc Gulp hoặc npm để chạy thử nghiệm và dọn dẹp mã trong quá trình xây dựng của bạn. Đây là một cách tuyệt vời để thực hiện các tác vụ như linting và rút gọn mã, thêm tiền tố CSS hoặc chuyển đổi các tính năng JavaScript mới để đạt được phạm vi tiếp cận tối đa trên nhiều trình duyệt, v.v.
2. Sử dụng hệ thống tự động hóa trình duyệt như Selenium để chạy thử nghiệm cụ thể trên các trình duyệt đã cài đặt và trả về kết quả, cảnh báo bạn về các lỗi trong trình duyệt khi chúng xuất hiện. Các ứng dụng thử nghiệm trên nhiều trình duyệt thương mại như LambdaTest, Sauce Labs, BrowserStack và TestingBot dựa trên Selenium, nhưng cho phép bạn truy cập thiết lập của chúng từ xa bằng giao diện đơn giản, giúp bạn không gặp rắc rối khi thiết lập hệ thống thử nghiệm của riêng mình

Chúng ta sẽ xem xét cách thiết lập hệ thống thử nghiệm dựa trên Selenium của riêng bạn trong bài viết tiếp theo. Trong bài viết này, chúng ta sẽ xem xét cách thiết lập một trình chạy tác vụ và sử dụng chức năng cơ bản của các hệ thống thương mại như những hệ thống đã đề cập ở trên

Ghi chú. hai loại trên không loại trừ lẫn nhau. Có thể thiết lập trình chạy tác vụ để truy cập dịch vụ như Sauce Labs hoặc LambdaTest thông qua API, chạy thử nghiệm trên nhiều trình duyệt và trả về kết quả. Chúng tôi cũng sẽ xem xét điều này dưới đây

Như chúng tôi đã nói ở trên, bạn có thể tăng tốc đáng kể các tác vụ phổ biến như linting và rút gọn mã bằng cách sử dụng trình chạy tác vụ để chạy mọi thứ bạn cần tự động chạy tại một thời điểm nhất định trong quy trình xây dựng của bạn. Ví dụ: đây có thể là mỗi khi bạn lưu tệp hoặc tại một thời điểm nào đó. Trong phần này, chúng ta sẽ xem cách tự động hóa việc chạy tác vụ bằng Node và Gulp, một tùy chọn thân thiện với người mới bắt đầu

Hầu hết các công cụ ngày nay đều dựa trên Node. js, vì vậy bạn sẽ cần cài đặt nó từ nodejs. tổ chức

1. Tải xuống trình cài đặt cho hệ thống của bạn từ trang web trên. (Nếu bạn đã cài đặt Node và npm, hãy chuyển sang điểm 4)
2. Cài đặt nó giống như bất kỳ chương trình nào khác. Lưu ý rằng Node đi kèm với Trình quản lý gói Node (npm), cho phép bạn dễ dàng cài đặt các gói, chia sẻ các gói của riêng bạn với người khác và chạy các tập lệnh hữu ích trong các dự án của bạn
3. Khi quá trình cài đặt hoàn tất, hãy kiểm tra xem nút đó đã được cài đặt chưa bằng cách nhập nội dung sau vào thiết bị đầu cuối, thao tác này sẽ trả về các phiên bản đã cài đặt của Nút và npm

   node -v
   npm -v
   

4. Nếu bạn đã cài đặt Node/npm, bạn nên cập nhật chúng lên phiên bản mới nhất. Để cập nhật Node, cách đáng tin cậy nhất là tải xuống và cài đặt gói cài đặt cập nhật từ trang web của họ (xem liên kết ở trên). Để cập nhật npm, hãy sử dụng lệnh sau trong thiết bị đầu cuối của bạn

   npm install npm@latest -g
   

Ghi chú. Nếu lệnh trên không thành công với lỗi quyền, Sửa quyền npm sẽ giúp bạn loại bỏ

Để bắt đầu sử dụng các gói dựa trên Node/npm cho các dự án của bạn, bạn cần thiết lập các thư mục dự án của mình dưới dạng các dự án npm. Điều này rất dễ làm

Ví dụ: trước tiên hãy tạo một thư mục thử nghiệm để cho phép chúng tôi chơi mà không sợ vi phạm bất cứ điều gì

1. Tạo một thư mục mới ở đâu đó hợp lý bằng giao diện người dùng trình quản lý tệp của bạn hoặc trên dòng lệnh bằng cách điều hướng đến vị trí bạn muốn và chạy lệnh sau

   mkdir node-test
   

2. Để biến thư mục này thành một dự án npm, bạn chỉ cần vào bên trong thư mục thử nghiệm của mình và khởi tạo nó, như sau

   cd node-test
   npm init
   

3. Lệnh thứ hai này sẽ hỏi bạn nhiều câu hỏi để tìm hiểu thông tin cần thiết để thiết lập dự án;
4. Khi tất cả các câu hỏi đã được hỏi, nó sẽ hỏi bạn xem thông tin đã nhập có ổn không. Nhập

   cd node-test
   npm init
   

   6 và nhấn Enter/Return và npm sẽ tạo tệp

   cd node-test
   npm init
   

   7 trong thư mục của bạn

Tệp này về cơ bản là tệp cấu hình cho dự án. Bạn có thể tùy chỉnh nó sau, nhưng bây giờ nó sẽ giống như thế này

________số 8_______

Với điều này, bạn đã sẵn sàng để tiếp tục

Hãy xem cách thiết lập Gulp và sử dụng nó để tự động hóa một số công cụ kiểm tra

1. Để bắt đầu, hãy tạo một dự án npm thử nghiệm bằng cách sử dụng quy trình chi tiết ở cuối phần trước
2. Tiếp theo, bạn sẽ cần một số nội dung HTML, CSS và JavaScript mẫu để kiểm tra hệ thống của mình — tạo bản sao chỉ mục mẫu của chúng tôi. html, chính. js và phong cách. css trong thư mục con có tên

   cd node-test
   npm init
   

   8 bên trong thư mục dự án của bạn. Bạn có thể thử nội dung thử nghiệm của riêng mình nếu muốn, nhưng hãy nhớ rằng những công cụ như vậy sẽ không hoạt động trên JS/CSS nội bộ — bạn cần các tệp bên ngoài
3. Đầu tiên, cài đặt gulp trên toàn cầu (có nghĩa là nó sẽ có sẵn trên tất cả các dự án) bằng cách sử dụng lệnh sau

   npm install --global gulp-cli
   

4. Tiếp theo, hãy chạy lệnh sau bên trong thư mục gốc của dự án npm của bạn để thiết lập gulp làm phần phụ thuộc cho dự án của bạn

   npm install --save-dev gulp
   

5. Bây giờ hãy tạo một tệp mới bên trong thư mục dự án của bạn có tên là

   cd node-test
   npm init
   

   9. Đây là tệp sẽ chạy tất cả các tác vụ của chúng tôi. Bên trong tập tin này, đặt như sau

   const gulp = require('gulp');
   
   exports.default = function(cb) {
     console.log('Gulp running');
     cb();
   };
   

   Điều này yêu cầu mô-đun

   {
     "name": "node-test",
     "version": "1.0.0",
     "description": "Test for npm projects",
     "main": "index.js",
     "scripts": {
       "test": "test"
     },
     "author": "Chris Mills",
     "license": "MIT"
   }
   

   0 mà chúng tôi đã cài đặt trước đó, sau đó xuất một tác vụ mặc định không thực hiện gì ngoại trừ việc in một thông báo tới thiết bị đầu cuối — điều này hữu ích để cho chúng tôi biết rằng Gulp đang hoạt động. Mỗi tác vụ gulp được xuất ở cùng một định dạng cơ bản —

   {
     "name": "node-test",
     "version": "1.0.0",
     "description": "Test for npm projects",
     "main": "index.js",
     "scripts": {
       "test": "test"
     },
     "author": "Chris Mills",
     "license": "MIT"
   }
   

   1. Mỗi hàm nhận một tham số — gọi lại để chạy khi tác vụ hoàn thành
6. Bạn có thể chạy tác vụ mặc định của gulp bằng lệnh sau — thử ngay bây giờ

   gulp
   

Để thêm một số nhiệm vụ thực sự vào Gulp, chúng ta cần suy nghĩ về những gì chúng ta muốn làm. Một tập hợp các chức năng cơ bản hợp lý để chạy trên dự án của chúng tôi như sau

• html-tidy, css-lint và js-hint để xử lý xơ vải và báo cáo/sửa các lỗi HTML/CSS/JS phổ biến (xem gulp-htmltidy, gulp-csslint, gulp-jshint)
• Autoprefixer để quét CSS của chúng tôi và chỉ thêm tiền tố của nhà cung cấp khi cần (xem gulp-autoprefixer)
• babel để chuyển bất kỳ tính năng cú pháp JavaScript mới nào sang cú pháp truyền thống hoạt động trong các trình duyệt cũ hơn (xem gulp-babel)

Xem các liên kết ở trên để biết hướng dẫn đầy đủ về các gói gulp khác nhau mà chúng tôi đang sử dụng

Để sử dụng từng plugin, trước tiên bạn cần cài đặt nó qua npm, sau đó yêu cầu bất kỳ phần phụ thuộc nào ở đầu tệp

cd node-test
npm init

html gọn gàng

1. Cài đặt bằng dòng sau

   npm install --save-dev gulp-htmltidy
   

   Ghi chú.

   {
     "name": "node-test",
     "version": "1.0.0",
     "description": "Test for npm projects",
     "main": "index.js",
     "scripts": {
       "test": "test"
     },
     "author": "Chris Mills",
     "license": "MIT"
   }
   

   3 thêm gói dưới dạng phụ thuộc vào dự án của bạn. Nếu bạn tìm trong tệp

   cd node-test
   npm init
   

   7 của dự án, bạn sẽ thấy một mục nhập cho nó trong thuộc tính

   {
     "name": "node-test",
     "version": "1.0.0",
     "description": "Test for npm projects",
     "main": "index.js",
     "scripts": {
       "test": "test"
     },
     "author": "Chris Mills",
     "license": "MIT"
   }
   

   5

2. Thêm phần phụ thuộc sau vào

   cd node-test
   npm init
   

   9

   npm install npm@latest -g
   

   0

3. Thêm bài kiểm tra sau vào dưới cùng của

   cd node-test
   npm init
   

   9

   npm install npm@latest -g
   

   1

4. Xuất tác vụ html bằng cách sử dụng

   npm install npm@latest -g
   

   2

5. Thay đổi xuất mặc định thành

   npm install npm@latest -g
   

   3

Ở đây chúng tôi đang lấy tệp

{
  "name": "node-test",
  "version": "1.0.0",
  "description": "Test for npm projects",
  "main": "index.js",
  "scripts": {
    "test": "test"
  },
  "author": "Chris Mills",
  "license": "MIT"
}

{
  "name": "node-test",
  "version": "1.0.0",
  "description": "Test for npm projects",
  "main": "index.js",
  "scripts": {
    "test": "test"
  },
  "author": "Chris Mills",
  "license": "MIT"
}

Tiếp theo, chúng tôi sử dụng hàm

npm install --global gulp-cli

npm install --global gulp-cli

npm install --global gulp-cli

npm install --global gulp-cli

Trong phiên bản đầu vào của tệp, bạn có thể nhận thấy rằng chúng tôi đặt một phần tử

npm install --global gulp-cli

Autoprefixer và css-lint

1. Cài đặt bằng các dòng sau

   npm install npm@latest -g
   

   4

2. Thêm các phụ thuộc sau vào

   cd node-test
   npm init
   

   9

   npm install npm@latest -g
   

   5

3. Thêm bài kiểm tra sau vào dưới cùng của

   cd node-test
   npm init
   

   9

   npm install npm@latest -g
   

   6

4. Thêm thuộc tính sau vào

   cd node-test
   npm init
   

   7

   npm install npm@latest -g
   

   7

5. Thêm dòng này sau các định nghĩa const

   npm install npm@latest -g
   

   8

6. Xuất tác vụ css bằng cách sử dụng

   npm install npm@latest -g
   

   9

7. Thay đổi tác vụ mặc định thành

   mkdir node-test
   

   0

Ở đây, chúng tôi lấy tệp

npm install --global gulp-cli

npm install --global gulp-cli

js-hint và babel

1. Cài đặt bằng các dòng sau

   mkdir node-test
   

   1

2. Thêm các phụ thuộc sau vào

   cd node-test
   npm init
   

   9

   mkdir node-test
   

   2

3. Thêm bài kiểm tra sau vào dưới cùng của

   cd node-test
   npm init
   

   9

   mkdir node-test
   

   3

4. Xuất tác vụ js bằng cách sử dụng

   mkdir node-test
   

   4

5. Thay đổi tác vụ mặc định thành

   mkdir node-test
   

   5

Ở đây, chúng tôi lấy tệp

npm install --save-dev gulp

npm install --save-dev gulp

npm install --save-dev gulp

Ý tưởng khác

Khi tất cả đã được thiết lập, bạn có thể chạy lệnh

{
  "name": "node-test",
  "version": "1.0.0",
  "description": "Test for npm projects",
  "main": "index.js",
  "scripts": {
    "test": "test"
  },
  "author": "Chris Mills",
  "license": "MIT"
}

Sau đó, bạn có thể thử xuất tệp bằng các tác vụ tự động của mình bằng cách xem chúng bên trong thư mục

npm install --global gulp-cli

npm install --save-dev gulp

Nếu bạn gặp lỗi, hãy kiểm tra xem bạn đã thêm tất cả các phụ thuộc và kiểm tra như hình trên chưa;

Gulp đi kèm với chức năng

npm install --save-dev gulp

cd node-test
npm init

mkdir node-test

Bây giờ hãy thử nhập lệnh

const gulp = require('gulp');

exports.default = function(cb) {
  console.log('Gulp running');
  cb();
};

Ghi chú. Ký tự

const gulp = require('gulp');

exports.default = function(cb) {
  console.log('Gulp running');
  cb();
};

const gulp = require('gulp');

exports.default = function(cb) {
  console.log('Gulp running');
  cb();
};

Còn rất nhiều điều bạn có thể làm với Gulp. Thư mục plugin Gulp có hàng nghìn plugin để tìm kiếm

Có rất nhiều người chạy nhiệm vụ khác có sẵn. Chúng tôi chắc chắn không cố gắng nói rằng Gulp là giải pháp tốt nhất hiện có, nhưng nó phù hợp với chúng tôi và nó khá dễ tiếp cận đối với người mới bắt đầu. Bạn cũng có thể thử sử dụng các giải pháp khác

• Grunt hoạt động theo cách rất giống với Gulp, ngoại trừ việc nó dựa trên các tác vụ được chỉ định trong tệp cấu hình, thay vì sử dụng JavaScript đã viết. Xem Bắt đầu với Grunt để biết thêm chi tiết
• Bạn cũng có thể chạy các tác vụ trực tiếp bằng cách sử dụng các tập lệnh npm nằm trong tệp

  cd node-test
  npm init
  

  7 của mình mà không cần cài đặt bất kỳ loại hệ thống chạy tác vụ bổ sung nào. Điều này hoạt động dựa trên tiền đề rằng những thứ như plugin Gulp về cơ bản là các trình bao bọc xung quanh các công cụ dòng lệnh. Vì vậy, nếu bạn có thể tìm ra cách chạy các công cụ bằng dòng lệnh, thì bạn có thể chạy chúng bằng tập lệnh npm. Nó phức tạp hơn một chút để làm việc, nhưng có thể là phần thưởng cho những người mạnh mẽ với kỹ năng dòng lệnh của họ. Tại sao tập lệnh npm?

Bây giờ, hãy xem xét các dịch vụ thử nghiệm trình duyệt thương mại của bên thứ ba và những gì họ có thể làm cho chúng ta

Tiền đề cơ bản với các ứng dụng như vậy là công ty điều hành mỗi ứng dụng có một nhóm máy chủ khổng lồ có thể chạy nhiều thử nghiệm khác nhau. Khi bạn sử dụng dịch vụ này, bạn cung cấp một URL của trang mà bạn muốn kiểm tra cùng với thông tin, chẳng hạn như trình duyệt nào bạn muốn nó kiểm tra. Sau đó, ứng dụng sẽ định cấu hình máy ảo mới với HĐH và trình duyệt bạn đã chỉ định, đồng thời trả về kết quả kiểm tra ở dạng ảnh chụp màn hình, video, tệp nhật ký, văn bản, v.v.

Sau đó, bạn có thể nâng cấp một thiết bị, sử dụng API để truy cập chức năng theo chương trình, điều đó có nghĩa là các ứng dụng đó có thể được kết hợp với các trình chạy tác vụ, chẳng hạn như môi trường Selenium cục bộ của riêng bạn và các môi trường khác, để tạo các thử nghiệm tự động

Ghi chú. Có sẵn các hệ thống thử nghiệm trình duyệt thương mại khác nhưng trong bài viết này, chúng tôi sẽ tập trung vào LambdaTest, Sauce Labs và BrowserStack. Chúng tôi không nói rằng đây nhất thiết phải là những công cụ tốt nhất hiện có, nhưng chúng là những công cụ tốt, đơn giản cho người mới bắt đầu sử dụng.

Bắt đầu với LambdaTest

1. Hãy bắt đầu bằng cách đăng ký LambdaTest miễn phí
2. Đăng nhập. Điều này sẽ tự động xảy ra sau khi bạn xác minh địa chỉ email của mình

Ghi chú. Không giống như các nhà cung cấp dịch vụ thử nghiệm trình duyệt chéo dựa trên đám mây khác, LambdaTest cung cấp tài khoản freemium nơi bạn có quyền truy cập trọn đời vào nền tảng của họ. Sự khác biệt duy nhất giữa phí bảo hiểm và gói freemium của họ là về lượng tiêu thụ. Đối với thử nghiệm tự động hóa thông qua Selenium Grid của họ, LambdaTest cung cấp 60 phút thử nghiệm miễn phí mỗi tháng

Những thứ cơ bản. kiểm tra thủ công

Sau khi đăng nhập vào LambdaTest, bạn sẽ được chuyển đến Trang tổng quan LambdaTest. Trang tổng quan sẽ cung cấp cho bạn thông tin chi tiết liên quan đến số phút bạn đã sử dụng, số phiên đồng thời đang chạy, tổng số bài kiểm tra của bạn cho đến nay, v.v.

1. Để bắt đầu với kiểm tra thủ công, bạn cần chọn tab "Kiểm tra thời gian thực" từ menu điều hướng bên trái.
   
2. Khi bạn nhấp vào Kiểm tra thời gian thực, bạn sẽ được chuyển đến màn hình nơi bạn có thể chọn cấu hình trình duyệt, phiên bản trình duyệt, HĐH và độ phân giải màn hình mà bạn muốn kiểm tra trang web của mình.
3. Khi bạn nhấp vào nút Bắt đầu, màn hình tải sẽ xuất hiện, cung cấp cho bạn VM (Máy ảo) dựa trên cấu hình của bạn. Sau khi được tải, bạn có thể thực hiện kiểm tra trực tiếp, tương tác trên nhiều trình duyệt với một trang web.
   Nếu bạn nhận thấy có vấn đề với giao diện người dùng, thì bạn có thể chia sẻ vấn đề đó với đồng nghiệp của mình bằng cách chụp ảnh màn hình máy ảo của bạn bằng nút chụp màn hình. Bạn cũng có thể quay video phiên kiểm tra của mình bằng cách nhấn vào nút ghi trong phiên kiểm tra của bạn.
4. Với trình chỉnh sửa hình ảnh tích hợp, hãy làm nổi bật ảnh chụp màn hình của bạn trước khi bạn gửi nó cho đồng nghiệp của mình.
5. Sử dụng nút đánh dấu là lỗi, bạn có thể đẩy lỗi tới nhiều công cụ của bên thứ ba như Jira, Asana, Trello, v.v. Bằng cách đó, bạn có thể ghi lỗi trực tiếp từ phiên thử nghiệm của mình trên LambdaTest vào phiên bản quản lý dự án của bạn. Kiểm tra tất cả các tích hợp LambdaTest của bên thứ ba

Ghi chú. Tất cả các video và hình ảnh được quay trong một phiên thử nghiệm đều được ghi lại trong thư viện, nhật ký thử nghiệm và trình theo dõi vấn đề tại LambdaTest

Bắt đầu với Sauce Labs

Hãy bắt đầu với Bản dùng thử Sauce Labs

1. Tạo tài khoản dùng thử Sauce Labs
2. Đăng nhập. Điều này sẽ tự động xảy ra sau khi bạn xác minh địa chỉ email của mình

Những thứ cơ bản. kiểm tra thủ công

Bảng điều khiển Sauce Labs có rất nhiều tùy chọn có sẵn trên đó. Hiện tại, hãy đảm bảo bạn đang ở tab Kiểm tra thủ công

1. Nhấp vào Bắt đầu một phiên thủ công mới
2. Trong màn hình tiếp theo, nhập URL của trang bạn muốn kiểm tra (sử dụng https. //mdn. github. io/learning-area/javascript/building-blocks/events/show-video-box-fixed. html chẳng hạn), sau đó chọn tổ hợp trình duyệt/hệ điều hành mà bạn muốn kiểm tra bằng cách sử dụng các nút và danh sách khác nhau. Có rất nhiều sự lựa chọn, như bạn sẽ thấy.
3. Khi bạn nhấp vào Bắt đầu phiên, một màn hình tải sẽ xuất hiện, màn hình này sẽ khởi động một máy ảo chạy tổ hợp bạn đã chọn
4. Khi tải xong, bạn có thể bắt đầu kiểm tra từ xa trang web đang chạy trong trình duyệt đã chọn.
5. Từ đây, bạn có thể thấy bố cục giống như trong trình duyệt mà bạn đang thử nghiệm, di chuyển chuột xung quanh và thử nhấp vào các nút, v.v. Menu trên cùng cho phép bạn
   • Dừng phiên
   • Cung cấp cho người khác một URL để họ có thể quan sát thử nghiệm từ xa
   • Sao chép văn bản/ghi chú vào khay nhớ tạm từ xa
   • Chụp màn hình
   • Thử nghiệm ở chế độ toàn màn hình

Sau khi dừng phiên, bạn sẽ quay lại tab Kiểm tra thủ công, nơi bạn sẽ thấy mục nhập cho từng phiên thủ công trước đó mà bạn đã bắt đầu. Nhấp vào một trong các mục này sẽ hiển thị thêm dữ liệu cho phiên. Tại đây, bạn có thể tải xuống bất kỳ ảnh chụp màn hình nào bạn đã chụp, xem video về phiên, xem nhật ký dữ liệu, v.v.

Ghi chú. Điều này đã rất hữu ích và thuận tiện hơn nhiều so với việc bạn phải tự thiết lập tất cả các trình giả lập và máy ảo này

Trình độ cao. API phòng thí nghiệm nước sốt

Sauce Labs có API yên tĩnh cho phép bạn truy xuất thông tin chi tiết về tài khoản của mình và các bài kiểm tra hiện tại theo chương trình, đồng thời chú thích các bài kiểm tra với các chi tiết khác, chẳng hạn như trạng thái đạt/không đạt của chúng mà không thể ghi lại chỉ bằng kiểm tra thủ công. Ví dụ: bạn có thể muốn chạy một trong các thử nghiệm Selenium của riêng mình từ xa bằng cách sử dụng Sauce Labs để kiểm tra một tổ hợp trình duyệt/hệ điều hành nhất định, sau đó chuyển kết quả kiểm tra lại cho Sauce Labs

Nó có sẵn một số ứng dụng khách để cho phép bạn thực hiện lệnh gọi API bằng môi trường yêu thích của mình, có thể là PHP, Java, Node. js, v.v.

Hãy xem sơ qua về cách chúng ta truy cập API bằng Node. js và nút-saucelabs

1. Trước tiên, hãy thiết lập một dự án npm mới để kiểm tra điều này, như được trình bày chi tiết trong. Sử dụng một tên thư mục khác với trước đây, chẳng hạn như

   const gulp = require('gulp');
   
   exports.default = function(cb) {
     console.log('Gulp running');
     cb();
   };
   

   5
2. Cài đặt trình bao bọc Node Sauce Labs bằng lệnh sau.

   mkdir node-test
   

   7
3. Tạo một tệp mới bên trong gốc dự án của bạn có tên là

   const gulp = require('gulp');
   
   exports.default = function(cb) {
     console.log('Gulp running');
     cb();
   };
   

   6. cung cấp cho nó các nội dung sau

   mkdir node-test
   

   8

4. Bạn sẽ cần điền tên người dùng Sauce Labs và khóa API của mình vào những chỗ được chỉ định. Chúng có thể được lấy từ trang Cài đặt người dùng của bạn. Điền vào những thứ này ngay bây giờ
5. Đảm bảo mọi thứ đã được lưu và chạy tệp của bạn như vậy

   mkdir node-test
   

   9

Trình độ cao. kiểm tra tự động

Chúng tôi sẽ đề cập đến việc thực sự chạy thử nghiệm Sauce Lab tự động trong bài viết tiếp theo

Bắt đầu với BrowserStack

Hãy bắt đầu với Bản dùng thử BrowserStack

1. Tạo tài khoản dùng thử BrowserStack
2. Đăng nhập. Điều này sẽ tự động xảy ra sau khi bạn xác minh địa chỉ email của mình
3. Khi đăng nhập lần đầu, bạn sẽ ở trang Thử nghiệm trực tiếp;
4. Nếu bạn đang dùng Firefox hoặc Chrome, bạn sẽ được nhắc Cài đặt tiện ích mở rộng trình duyệt trong hộp thoại có tiêu đề "Bật kiểm tra cục bộ" — nhấp vào nút Cài đặt để tiếp tục. Trên các trình duyệt khác, bạn vẫn có thể sử dụng một số tính năng (thường là qua Flash), nhưng bạn có thể không có được trải nghiệm đầy đủ

Những thứ cơ bản. kiểm tra thủ công

Bảng điều khiển BrowserStack Live cho phép bạn chọn thiết bị và trình duyệt mà bạn muốn kiểm tra — Nền tảng ở cột bên trái, thiết bị ở bên phải. Khi bạn di chuột qua hoặc nhấp vào từng thiết bị, bạn sẽ có một lựa chọn trình duyệt khả dụng trên thiết bị đó

Nhấp vào một trong các biểu tượng trình duyệt đó sẽ tải lên lựa chọn nền tảng/thiết bị/trình duyệt của bạn — hãy chọn một biểu tượng ngay bây giờ và dùng thử

Ghi chú. Biểu tượng thiết bị màu xanh bên cạnh một số lựa chọn thiết bị di động báo hiệu rằng bạn sẽ thử nghiệm trên thiết bị thực;

Bạn sẽ thấy rằng bạn có thể nhập URL vào thanh địa chỉ và sử dụng các điều khiển khác giống như bạn mong muốn trên một thiết bị thực. Bạn thậm chí có thể thực hiện những việc như sao chép và dán từ thiết bị vào khay nhớ tạm, cuộn lên và xuống bằng cách kéo bằng chuột hoặc sử dụng các cử chỉ thích hợp (e. g. chụm/thu phóng, hai ngón tay để cuộn) trên bàn di chuột của các thiết bị hỗ trợ (e. g. MacBook). Lưu ý rằng không phải tất cả các tính năng đều khả dụng trên mọi thiết bị

Bạn cũng sẽ thấy một menu cho phép bạn kiểm soát phiên

Các tính năng ở đây như sau

• Chuyển — Thay đổi sang tổ hợp nền tảng/thiết bị/trình duyệt khác
• Định hướng (trông giống như biểu tượng Tải lại) — Chuyển hướng giữa dọc và ngang
• Vừa với màn hình (trông giống biểu tượng toàn màn hình) — Lấp đầy các khu vực thử nghiệm bằng thiết bị càng nhiều càng tốt
• Chụp lỗi (trông giống như máy ảnh) — Chụp ảnh màn hình, sau đó cho phép bạn chú thích và lưu ảnh đó
• Trình theo dõi sự cố (trông giống như một cỗ bài) — Xem các lỗi/ảnh chụp màn hình đã chụp trước đó
• Cài đặt (biểu tượng răng cưa) — Cho phép bạn thay đổi cài đặt chung cho phiên
• Trợ giúp (dấu chấm hỏi) — Truy cập các chức năng trợ giúp/hỗ trợ
• Công cụ dành cho nhà phát triển — Cho phép bạn sử dụng công cụ dành cho nhà phát triển của trình duyệt để trực tiếp gỡ lỗi hoặc thao tác trên trang được hiển thị trong trình duyệt thử nghiệm. Điều này hiện chỉ hoạt động khi thử nghiệm trình duyệt Safari trên thiết bị iOS
• Thông tin thiết bị — Hiển thị thông tin về thiết bị kiểm tra
• Tính năng — Hiển thị cho bạn những tính năng mà cấu hình hiện tại hỗ trợ, e. g. sao chép vào clipboard, hỗ trợ cử chỉ, v.v.
• Dừng - Kết thúc phiên

Ghi chú. Điều này đã rất hữu ích và thuận tiện hơn nhiều so với việc bạn phải tự thiết lập tất cả các trình giả lập và máy ảo này

Các tính năng cơ bản khác

Nếu bạn quay lại trang BrowserStack chính, bạn sẽ tìm thấy một số tính năng cơ bản hữu ích khác trong tùy chọn menu Khác

• Phản ứng nhanh nhẹn. Nhập URL và nhấn Tạo và BrowserStack sẽ tải URL đó trên nhiều thiết bị có kích thước khung nhìn khác nhau. Trong mỗi thiết bị, bạn có thể điều chỉnh thêm các cài đặt như kích thước màn hình, để hiểu rõ cách bố cục trang web của bạn hoạt động trên các yếu tố hình thức khác nhau
• Ảnh chụp màn hình. Nhập URL, chọn trình duyệt/thiết bị/nền tảng mà bạn quan tâm, sau đó nhấn Tạo ảnh chụp màn hình — BrowserStack sẽ chụp ảnh màn hình trang web của bạn trong tất cả các trình duyệt khác nhau đó, sau đó cung cấp chúng để bạn xem và tải xuống

Trình độ cao. API BrowserStack

BrowserStack cũng có API an toàn cho phép bạn truy xuất thông tin chi tiết về gói tài khoản, phiên, bản dựng, v.v.

Nó có sẵn một số ứng dụng khách để cho phép bạn thực hiện lệnh gọi API bằng môi trường yêu thích của mình, có thể là PHP, Java, Node. js, v.v.

Hãy xem sơ qua về cách chúng ta truy cập API bằng Node. js

1. Trước tiên, hãy thiết lập một dự án npm mới để kiểm tra điều này, như được trình bày chi tiết trong. Sử dụng một tên thư mục khác với trước đây, chẳng hạn như

   const gulp = require('gulp');
   
   exports.default = function(cb) {
     console.log('Gulp running');
     cb();
   };
   

   7
2. Tạo một tệp mới bên trong gốc dự án của bạn có tên là

   const gulp = require('gulp');
   
   exports.default = function(cb) {
     console.log('Gulp running');
     cb();
   };
   

   8. cung cấp cho nó các nội dung sau

   cd node-test
   npm init
   

   0

3. Bạn sẽ cần điền tên người dùng BrowserStack và khóa API của mình vào những nơi được chỉ định. Chúng có thể được lấy từ bảng điều khiển tự động hóa BrowserStack của bạn. Điền vào những thứ này ngay bây giờ
4. Đảm bảo mọi thứ đã được lưu và chạy tệp của bạn như vậy

   cd node-test
   npm init
   

   1

Dưới đây chúng tôi cũng đã cung cấp một số chức năng làm sẵn khác mà bạn có thể thấy hữu ích khi làm việc với API đầy đủ của BrowserStack

cd node-test
npm init

Trình độ cao. kiểm tra tự động

Chúng tôi sẽ đề cập đến việc thực sự chạy thử nghiệm BrowserStack tự động trong bài viết tiếp theo

Bắt đầu với TestingBot

Hãy bắt đầu với Bản dùng thử TestingBot

1. Tạo tài khoản dùng thử TestingBot
2. Đăng nhập. Điều này sẽ tự động xảy ra sau khi bạn xác minh địa chỉ email của mình

Những thứ cơ bản. kiểm tra thủ công

Bảng điều khiển TestingBot liệt kê các tùy chọn khác nhau mà bạn có thể chọn. Hiện tại, hãy đảm bảo bạn đang ở tab Thử nghiệm web trực tiếp

1. Nhập URL của trang bạn muốn kiểm tra
2. Chọn tổ hợp trình duyệt/hệ điều hành bạn muốn kiểm tra bằng cách chọn tổ hợp trong lưới.
3. Khi bạn nhấp vào Bắt đầu trình duyệt, một màn hình tải sẽ xuất hiện, màn hình này sẽ khởi động một máy ảo chạy tổ hợp bạn đã chọn
4. Khi tải xong, bạn có thể bắt đầu kiểm tra từ xa trang web đang chạy trong trình duyệt đã chọn
5. Từ đây, bạn có thể thấy bố cục giống như trong trình duyệt mà bạn đang thử nghiệm, di chuyển chuột xung quanh và thử nhấp vào các nút, v.v. Menu bên cho phép bạn
   • Dừng phiên
   • Thay đổi độ phân giải màn hình
   • Sao chép văn bản/ghi chú vào khay nhớ tạm từ xa
   • Chụp, chỉnh sửa và tải xuống ảnh chụp màn hình
   • Thử nghiệm ở chế độ toàn màn hình

Sau khi dừng phiên, bạn sẽ quay lại trang Thử nghiệm web trực tiếp, nơi bạn sẽ thấy mục nhập cho từng phiên thủ công trước đó mà bạn đã bắt đầu. Nhấp vào một trong các mục này sẽ hiển thị thêm dữ liệu cho phiên. Tại đây, bạn có thể tải xuống bất kỳ ảnh chụp màn hình nào bạn đã chụp, xem video về bài kiểm tra và xem nhật ký cho phiên

Trình độ cao. API thử nghiệmBot

TestingBot có API an toàn cho phép bạn truy xuất thông tin chi tiết về tài khoản của mình và các bài kiểm tra hiện có theo chương trình, đồng thời chú thích các bài kiểm tra với các chi tiết khác, chẳng hạn như trạng thái đạt/không đạt của chúng mà không thể ghi lại chỉ bằng kiểm tra thủ công

TestingBot có một số ứng dụng khách API mà bạn có thể sử dụng để tương tác với API, bao gồm các ứng dụng khách cho NodeJS, Python, Ruby, Java và PHP

Dưới đây là một ví dụ về cách tương tác với API TestingBot với ứng dụng khách NodeJS testingbot-api

1. Trước tiên, hãy thiết lập một dự án npm mới để kiểm tra điều này, như được trình bày chi tiết trong. Sử dụng một tên thư mục khác với trước đây, chẳng hạn như

   const gulp = require('gulp');
   
   exports.default = function(cb) {
     console.log('Gulp running');
     cb();
   };
   

   9
2. Cài đặt trình bao bọc Node TestingBot bằng lệnh sau.

   cd node-test
   npm init
   

   3
3. Tạo một tệp mới bên trong gốc dự án của bạn có tên là

   gulp
   

   0. cung cấp cho nó các nội dung sau

   cd node-test
   npm init
   

   4

4. Bạn sẽ cần điền Khóa và Bí mật Kiểm tra Bot của mình vào những nơi được chỉ định. Bạn có thể tìm thấy chúng trong bảng điều khiển TestingBot
5. Đảm bảo mọi thứ đã được lưu và chạy tệp

   cd node-test
   npm init
   

   5

Trình độ cao. kiểm tra tự động

Chúng tôi sẽ đề cập đến việc thực sự chạy thử nghiệm TestingBot tự động trong bài viết tiếp theo

Đây là một hành trình khá thú vị, nhưng tôi chắc rằng bạn có thể bắt đầu thấy được những lợi ích của việc sử dụng các công cụ tự động hóa để thực hiện một số công việc nặng nhọc về mặt thử nghiệm

Trong bài viết tiếp theo, chúng ta sẽ xem xét việc thiết lập hệ thống tự động hóa cục bộ của riêng mình bằng Selenium và cách kết hợp hệ thống đó với các dịch vụ như Sauce Labs, BrowserStack và TestingBot

Làm cách nào tôi có thể thực hành viết mã HTML?

Làm cách nào tôi có thể thực hành chỉ HTML?

CSS có thể được tự động hóa không?

Làm cách nào tôi có thể thực hành viết mã HTML trên thiết bị di động?