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

Bài viết này trình bày cách tạo tài liệu HTML từ mẫu với sự trợ giúp của Power Automate (Microsoft Flow)

Trong bài viết này, chúng tôi sẽ tạo hóa đơn HTML dựa trên một số dữ liệu. Đây là giao diện của tệp HTML cuối cùng của chúng tôi

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

Tài liệu mẫu và kết quả của chúng tôi phải được lưu trữ ở đâu đó. Power Automate (Microsoft Flow) có rất nhiều trình kết nối cho các hệ thống khác nhau. Đây chỉ là một vài trong số họ

  • Điểm chia sẻ

  • Lực lượng bán hàng

  • Hộp

  • Một ổ đĩa

  • Google Drive

  • Dropbox

  • SFTP

  • Hệ thống tập tin

Bạn có thể lưu trữ tệp của mình ở bất cứ đâu. Trong ví dụ này, chúng tôi sẽ lưu trữ tài liệu của mình trong SharePoint. Quy trình của chúng tôi sẽ sử dụng đối tượng JSON làm dữ liệu nguồn cho mẫu, nhưng bạn có thể lấy dữ liệu từ các nguồn khác. Ví dụ: các mục trong danh sách truy vấn từ SharePoint hoặc từ Salesforce

Đây là cách dòng chảy của chúng tôi trông

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

Dưới đây là mô tả từng bước cho quy trình

kích hoạt dòng chảy

Bạn thực sự có thể chọn bất kỳ trình kích hoạt nào. Ví dụ: bạn có thể bắt đầu Flow khi tạo tệp trong thư viện tài liệu SharePoint. Chúng tôi sử dụng trình kích hoạt “Kích hoạt luồng theo cách thủ công” tại đây để đơn giản hóa luồng

Nhận nội dung tập tin

Hành động này lấy nội dung tệp của tệp được chỉ định từ thư viện tài liệu SharePoint. Bạn chỉ cần chỉ định URL trang web SharePoint và đường dẫn đến tệp của mình. Chúng tôi sử dụng hành động này để đọc mẫu HTML

Bạn có thể sử dụng bất kỳ trình kết nối nào khác để lấy tệp từ hệ thống của mình

Tạo HTML từ mẫu

Đây là một hành động từ trình kết nối Tài liệu Plumsail. Thao tác này phù hợp để tạo tài liệu văn bản và HTML

Bạn có thể tìm thêm thông tin về hành động này

Có hai tham số

Trong tham số đầu tiên 'Source HTML', bạn có thể đặt HTML/văn bản thô của mẫu hoặc nội dung tệp của mẫu từ một số hành động khác. Chúng tôi đã chỉ định đầu ra của hành động trước đó dưới dạng mẫu. Tệp nội bộ khá lớn do kiểu CSS. Mẫu bên dưới chỉ là một phần của mẫu có đoạn mã cho các mục hóa đơn

Sử dụng liên kết này để tải xuống mẫu hoàn chỉnh

        
            {{#each Items}} {{#with FieldValues}}
            
            {{/with}} {{/each}}
        
    
            #
            Title
            Quantity
            Unit Price ($)
            Subtotal ($)
        
        
        
            
                 
                $ Total 
                 ${{Total}} 
            
        
        
                 {{#index}} 
                 {{Title}} 
                 {{Quantity}} 
                 {{UnitPrice}} 
                 {{SubTotal}} 
            

Bạn có thể thấy rằng có các phần giữ chỗ như {{Total}}{{Quantity}} trong mẫu. Ngoài ra còn có trình vòng lặp #{{each}} để hiển thị các mục hóa đơn. Vui lòng đọc mô tả cú pháp mẫu để biết thêm thông tin

Ghi chú

Nếu bạn cần phông chữ tùy chỉnh hoặc hỗ trợ đa ngôn ngữ, hãy xem lại bài viết tài liệu mô tả cách làm việc với nhiều phông chữ khác nhau và cách chuyển đổi chính xác các ký tự nước ngoài

Trong tham số thứ hai, chúng tôi đã chỉ định dữ liệu để áp dụng cho mẫu ở định dạng JSON. Đối tượng này chứa thông tin cho tiêu đề hóa đơn và cho các mục hóa đơn

{
    "InvoiceDate": "10/02/2017",
    "InvoiceNum": 1,
    "Total": 1098,
    "ClientCompany": "Contoso ltd.",
    "ClientName": "John Doe",
    "ClientAddress": "55 East 52nd Street 21st",
    "ClientCity": "New York",
    "ClientRegion": "US",
    "ClientZip": "10022",
    "Items": [
        {
            "FieldValues": {
                "Quantity": 1,
                "SubTotal": 499,
                "Title": "Product Name #1",
                "UnitPrice": "499"
            }
        },
        {
            "FieldValues": {
                "Quantity": 1,
                "SubTotal": 599,
                "Title": "Product Name #2",
                "UnitPrice": 599
            }
        }
    ]
}

tạo tập tin

Bây giờ bạn cần lưu trữ tệp văn bản ở đâu đó. Trong ví dụ của chúng tôi, chúng tôi sử dụng hành động 'Tạo tệp' từ trình kết nối SharePoint để lưu trữ tài liệu HTML vào thư viện tài liệu SharePoint

Chạy thử nghiệm theo cách thủ công trên một số trình duyệt và thiết bị, vài lần mỗi ngày, có thể trở nên tẻ nhạt và tốn thời gian. Để xử lý việc này hiệu quả, bạn nên làm quen với các công cụ tự động hóa. Trong bài viết này, chúng ta xem xét những gì có sẵn, cách sử dụng trình chạy tác vụ và cách sử dụng những điều cơ bản của các ứng dụng tự động kiểm tra trình duyệt thương mại như LambdaTest, Sauce Labs, BrowserStack và TestingBot

điều kiện tiên quyết. Quen thuộc với các ngôn ngữ HTML, CSS và JavaScript cốt lõi; . Khách quan. Để cung cấp sự hiểu biết về những yêu cầu của kiểm thử tự động, cách kiểm thử tự động có thể giúp cuộc sống của bạn dễ dàng hơn và cách sử dụng một số sản phẩm thương mại giúp mọi việc dễ dàng hơn

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
9, sau đó thêm (các) bài kiểm tra của bạn vào cuối tệp và cuối cùng xuất tên tác vụ của bạn để có sẵn

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"
}
8 phát triển của chúng tôi với
{
  "name": "node-test",
  "version": "1.0.0",
  "description": "Test for npm projects",
  "main": "index.js",
  "scripts": {
    "test": "test"
  },
  "author": "Chris Mills",
  "license": "MIT"
}
9, tệp này cho phép chúng tôi lấy một tệp nguồn để làm điều gì đó với

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

npm install --global gulp-cli
0 để chuyển nguồn đó sang một lệnh khác để thực hiện một việc khác với. Chúng ta có thể xâu chuỗi bao nhiêu thứ này lại với nhau tùy thích. Trước tiên, chúng tôi chạy
npm install --global gulp-cli
1 trên nguồn, chạy qua và sửa lỗi trong tệp của chúng tôi. Hàm
npm install --global gulp-cli
0 thứ hai ghi tệp HTML đầu ra vào thư mục
npm install --global gulp-cli
3

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
4 trống;

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
8 của mình, chạy csslint trên tệp đó (xuất danh sách bất kỳ lỗi nào trong CSS của bạn tới thiết bị đầu cuối), sau đó chạy tệp đó qua trình tự sửa lỗi để thêm bất kỳ tiền tố nào cần thiết để làm cho các tính năng CSS mới chạy trong các trình duyệt cũ hơn. Ở cuối chuỗi ống, chúng tôi xuất CSS có tiền tố đã sửa đổi của mình vào thư mục
npm install --global gulp-cli
3. Lưu ý rằng điều này chỉ hoạt động nếu csslint không tìm thấy bất kỳ lỗi nào — hãy thử xóa dấu ngoặc nhọn khỏi tệp CSS của bạn và chạy lại gulp để xem kết quả bạn nhận được

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
2 của mình, chạy
npm install --save-dev gulp
3 trên tệp đó và xuất kết quả ra thiết bị đầu cuối bằng cách sử dụng
npm install --save-dev gulp
4; . Mã ban đầu của chúng tôi bao gồm một chức năng mũi tên béo, mà babel đã sửa đổi thành một chức năng kiểu cũ

Ý 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"
}
0 bên trong thư mục dự án của mình và bạn sẽ nhận được kết quả như thế này

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

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
3 và tải
npm install --save-dev gulp
8 trong trình duyệt web của bạn

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
9 mà bạn có thể sử dụng để xem tệp của mình và chạy thử nghiệm bất cứ khi nào bạn lưu tệp. Ví dụ: hãy thử thêm phần sau vào cuối
cd node-test
npm init
9 của bạn

mkdir node-test
6

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

const gulp = require('gulp');

exports.default = function(cb) {
  console.log('Gulp running');
  cb();
};
1 vào thiết bị đầu cuối của bạn. Bây giờ Gulp sẽ xem thư mục của bạn và chạy các tác vụ thích hợp bất cứ khi nào bạn lưu thay đổi vào tệp HTML, CSS hoặc JavaScript

Ghi chú. Ký tự

const gulp = require('gulp');

exports.default = function(cb) {
  console.log('Gulp running');
  cb();
};
2 là ký tự đại diện — ở đây chúng tôi đang nói "chạy các tác vụ này khi bất kỳ tệp nào thuộc loại này được lưu. Bạn cũng có thể sử dụng các ký tự đại diện trong các tác vụ chính của mình, ví dụ:
const gulp = require('gulp');

exports.default = function(cb) {
  console.log('Gulp running');
  cb();
};
3 sẽ lấy tất cả các tệp CSS của bạn rồi chạy các tác vụ theo đường ống trên chúng

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.
    Cách tự động hóa mã HTML
  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.
    Cách tự động hóa mã HTML
  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.
    Cách tự động hóa mã HTML
    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.
    Cách tự động hóa mã HTML
  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.
    Cách tự động hóa mã HTML
  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.
    Cách tự động hóa mã HTML
  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ị đó

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

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ử

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

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ách tự động hóa mã HTML

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
2

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.
    Cách tự động hóa mã HTML
  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?

Cách học HTML miễn phí .
Codecademy có nhiều chương trình miễn phí cung cấp cho bạn những kỹ năng kỹ thuật cần thiết. .
Tìm hiểu-HTML. org là một nguồn đáng tin cậy cho mọi thứ bạn cần biết về HTML. .
General Assembly Dash là một trang web phổ biến để bắt đầu tìm hiểu những kiến ​​thức cơ bản về HTML

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

Nếu bạn muốn học các kỹ năng HTML và CSS và bắt đầu kiếm tiền, đây là một số dự án thực hành tuyệt vời để giúp bạn bắt đầu. .
Xây dựng một danh mục đầu tư hoặc trang web cá nhân đơn giản. .
Làm cho sơ yếu lý lịch của bạn tương tác. .
Tạo một Bản tin Email. .
Tạo một trang web đáp ứng tĩnh. .
Xây dựng một hình thức. .
Tạo hoạt ảnh

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

Có, Tự động. css cung cấp cho bạn nhiều điểm kiểm soát đối với kích thước văn bản và tiêu đề.

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?

Một cách là sử dụng trình soạn thảo văn bản như Notepad++ . Đây là một ứng dụng miễn phí mà bạn có thể tải xuống từ cửa hàng Google Play. Khi bạn đã cài đặt ứng dụng, bạn có thể mở nó và bắt đầu viết mã HTML. Một cách khác để viết mã HTML trên Android là sử dụng ứng dụng có tên DroidEdit.