Nodejs tự động hóa

Vui lòng đọc phần 1 của loạt blog này, Hiểu về Web Scraping, Crawling và Automation với Node JS

Tự động hóa web là gì?

Tự động hóa web là quá trình sử dụng các dòng mã để tự động hóa các chức năng web nhất định. Tự động hóa web có thể được sử dụng để tự động hóa các tác vụ như kiểm tra xem. liên kết trong các trang đang hoạt động, các trang tải đúng cách, các biểu mẫu đang nhận dữ liệu, v.v.

Trường hợp sử dụng đơn giản trên Tự động hóa web

Đây là hai trường hợp sử dụng để giúp chúng tôi hiểu rõ hơn về Tự động hóa web là gì.

Trường hợp 1. Giả sử bạn có một trang web liên quan đến hỗ trợ khách hàng rất nhạy cảm. Trong mỗi lần xây dựng tiếp theo, bạn muốn xác thực rằng trang hỗ trợ khách hàng, trò chuyện và biểu mẫu đang hoạt động bình thường. Bạn có thể đính kèm các trường hợp thử nghiệm vào quy trình phát triển của mình để trong mỗi lần triển khai sản xuất, nó được xác thực trước.

Trường hợp 2. Bạn có một trang web bán sản phẩm tuyệt vời bao gồm thanh toán. Bạn sẽ muốn đảm bảo rằng thanh toán luôn hoạt động bình thường. Thanh toán có thể bao gồm nhiều phương thức. Bạn có thể tạo một lần thực thi thử nghiệm trong các khoảng thời gian nhất định [theo yêu cầu] để khách hàng của bạn không bao giờ gặp phải sự cố trong quá trình thanh toán cho tất cả các phương thức thanh toán này

Puppeteer cho Tự động hóa Web

Puppeteer là một công cụ tuyệt vời cho Tự động hóa Web vì nó cung cấp các tính năng khác nhau. một số trong số này là

• Tạo ảnh chụp màn hình và tệp PDF của các trang
• Thu thập dữ liệu SPA [Ứng dụng một trang] và tạo nội dung kết xuất trước [i. e. , "SSR" [Kết xuất phía máy chủ]]
• Tự động gửi biểu mẫu, kiểm tra giao diện người dùng, nhập liệu bằng bàn phím, v.v.
• Tạo môi trường thử nghiệm tự động, cập nhật. Chạy thử nghiệm của bạn trực tiếp trong phiên bản Chrome mới nhất bằng JavaScript và các tính năng mới nhất của trình duyệt
• Ghi lại dấu vết dòng thời gian của trang web của bạn để giúp chẩn đoán các vấn đề về hiệu suất
• Kiểm tra tiện ích mở rộng của Chrome

Hôm nay chúng ta sẽ làm gì với Puppeteer?

Trong phần này của bài viết, chúng ta sẽ xem cách sử dụng Puppeteer để

• xác thực các liên kết và [các] trang
• điền vào và gửi một mẫu đơn

Chúng tôi sẽ cần Bộ chọn trong quá trình thực thi mã. Vì vậy, hãy tìm hiểu cách tìm bộ chọn của chúng tôi một cách dễ dàng

1. Mở bất kỳ URL nào trong trình duyệt của bạn và để trang tải. Ở đây chúng tôi đã tải https. // hỗ trợ. ai

2. Click chuột phải vào phần tử muốn tìm Selector of. Ở đây chúng tôi đã nhấp chuột phải vào Blog

3. Nhấp vào Kiểm tra phần tử [Phần bổ sung sẽ mở trong trình duyệt của bạn]

4. Nhấp chuột phải vào phần tử văn bản được hiển thị trên tab Thành phần

5. Trong phần Sao chép, nhấp vào Bộ chọn Sao chép

Bắt đầu với múa rối

a] Nhấp hoặc Điều hướng. Đoạn mã dưới đây giúp truy cập trang web Bolster và điều hướng đến trung tâm tài nguyên

b] Điền vào biểu mẫu. Đoạn mã dưới đây giúp điền vào biểu mẫu trên bất kỳ trang web nào. Đảm bảo bạn điền chính xác thông tin chi tiết trang web

Chúng ta có thể thấy rằng từ các ví dụ trên, chúng ta có thể tự động hóa các sự kiện nhấp chuột hoặc điền vào biểu mẫu bằng các tập lệnh viết sẵn.

Tại Bolster, chúng tôi sử dụng những công cụ như vậy để tìm các trang web bất hợp pháp và gỡ bỏ chúng.

Về chúng tôi

Bolster là nền tảng bảo vệ rủi ro kỹ thuật số tự động duy nhất trên thế giới phát hiện, phân tích và gỡ bỏ các trang web và nội dung lừa đảo trên web, mạng xã hội, cửa hàng ứng dụng, thị trường và web đen

Bạn muốn tìm hiểu thêm về các giải pháp của Bolster?

Nếu bạn quan tâm đến nghiên cứu an ninh mạng nâng cao và làm việc với AI tiên tiến, hãy đến làm việc với chúng tôi tại Bolster. Kiểm tra các vị trí mở ở đây

Các nhà phát triển thường tự động hóa một số nhiệm vụ lặp đi lặp lại và tẻ nhạt để tiết kiệm thời gian cũng như tập trung vào nhiệm vụ hiện tại. Bài viết này cho thấy việc sử dụng Gulp như một công cụ xây dựng đơn giản và dễ dàng như thế nào

Qua

Antonios Minas

Antonios là kỹ sư phần mềm cao cấp chuyên về giao diện người dùng, WordPress, công nghệ Chuỗi khối, PHP và khung JavaScript

CHIA SẺ

CHIA SẺ

Là nhà phát triển web, đôi khi chúng ta thấy mình lặp đi lặp lại cùng một nhiệm vụ tẻ nhạt. Nếu bạn xem xét lượng thời gian bị lãng phí khi chạy lệnh xây dựng hoặc nhấn làm mới trên trình duyệt của mình, bạn sẽ nhận ra rằng mình có thể tiết kiệm được rất nhiều thời gian. Ngoài ra, bằng cách tự động hóa các quy trình của mình, bạn có thể tập trung vào nhiệm vụ hiện tại thay vì tạm thời rời khỏi “khu vực” [trạng thái năng suất của bạn]

Trong hướng dẫn tự động hóa JavaScript này, bạn sẽ học cách tự động hóa quy trình thiết kế và phát triển của mình bằng Gulp. Nếu bạn thiên về thiết kế hơn, tôi khuyến khích bạn vượt qua mọi nỗi sợ hãi mà bạn có và đọc tiếp. Mặt khác, nếu bạn là nhà phát triển, bạn sẽ có thể lướt qua vấn đề này một khi bạn hiểu logic đằng sau nó

Gulp là một hệ thống xây dựng sử dụng Node. js để triển khai cách tiếp cận nguồn-đích không đồng bộ để tự động hóa. Mọi thứ đều được viết bằng JavaScript, vì vậy bất kỳ ai có kiến ​​thức viết mã trung cấp đều có thể dễ dàng bắt đầu. Quy trình xây dựng Gulp bao gồm một tập hợp các trình theo dõi và tác vụ. Ngoài ra, cộng đồng phía sau Gulp duy trì một thư mục plugin khổng lồ trong npm giúp hoàn thành mọi tác vụ từ ghép JavaScript đến tạo phông chữ biểu tượng từ SVG

Các lựa chọn thay thế cho Gulp

Có rất nhiều lựa chọn thay thế ngoài kia, hầu hết trong số đó đã xuất hiện trong vài năm qua - thứ đáng chú ý nhất là Grunt. Cuộc thi giữa Gulp và Grunt sẽ không bao giờ có người chiến thắng rõ ràng, vì cả hai đều có ưu và nhược điểm, do đó tôi sẽ tránh đi sâu vào vấn đề đó. Tóm lại, việc Grunt phụ thuộc nhiều vào cấu hình là điều khiến mọi người hướng tới cách tiếp cận JavaScript của Gulp. Trong khi đó, các triển khai GUI gốc như Koala đã đạt được một số chỗ đứng, chủ yếu là từ những người từ chối viết mã. Tuy nhiên, với các ứng dụng đi kèm, không thể đạt đến mức độ tùy biến và khả năng mở rộng mà Gulp cung cấp

Nguyên tắc cơ bản về tự động hóa quy trình

bổ sung

Plugin là phương tiện mà qua đó gulp hoàn thành từng quy trình. Các plugin được cài đặt thông qua npm và được bắt đầu bằng cách sử dụng "yêu cầu"

nhiệm vụ

Đối với Gulp, các tác vụ luôn có nguồn và đích. Ở giữa chúng là các đường ống gọi từng plugin và xuất kết quả đã chuyển đổi sang đường ống tiếp theo

quả cầu

Globs là các mẫu ký tự đại diện đề cập đến các tệp. Các khối hoặc mảng các khối được sử dụng làm đầu vào trong nguồn tác vụ

người theo dõi

Người theo dõi xem các tệp nguồn để biết các thay đổi và gọi các tác vụ bất cứ khi nào phát hiện thấy thay đổi

gulpfile. js

Đây là tệp JavaScript mà lệnh “gulp” chỉ vào. Nó chứa mọi thứ từ tác vụ đến người theo dõi hoặc các đoạn mã khác được sử dụng bởi tác vụ

Một nhiệm vụ đơn giản

Để bắt đầu, bạn cần Node. js và shell dòng lệnh với quyền truy cập của quản trị viên. Bạn có thể tải xuống Nút. js từ đây. Sau khi cài đặt, bạn có thể chạy lệnh sau để đảm bảo rằng npm được cập nhật

sudo npm install npm -g

Cờ -g nói rằng quá trình cài đặt sẽ diễn ra trên toàn cầu

Bây giờ bạn đã sẵn sàng để cài đặt Gulp và bắt đầu gọi một số tác vụ đơn giản. Sử dụng lệnh sau để cài đặt Gulp trên toàn cầu

sudo npm install gulp -g

Lưu ý rằng bạn cũng có thể sử dụng lệnh tương tự để cập nhật

Bạn có thể tải xuống bộ khởi động giúp bạn thực hiện nhiệm vụ đầu tiên từ toptal-gulp-tutorial/step1. Nó bao gồm một tác vụ rất đơn giản là biên dịch các tệp SCSS thành CSS. Nó đang sử dụng plugin gulp-sass, sử dụng libsass. Tôi đã chọn libsass ở đây vì nó nhanh hơn nhiều so với giải pháp thay thế Ruby, mặc dù nó thiếu một số chức năng. Khi đã ở trong thư mục gốc của dự án, bạn có thể sử dụng lệnh sau để cài đặt tất cả các plugin cần thiết

npm install

Lệnh này đọc gói. json và cài đặt tất cả các phụ thuộc cần thiết. Chúng tôi đang sử dụng cài đặt npm cài đặt ở đây như một cách viết tắt cho những điều sau đây

npm install gulp --save-dev
npm install gulp-sass --save-dev

Cờ “–save-dev” thêm các plugin đã chọn vào gói. json devDependencies để lần sau khi bạn muốn cài đặt mọi thứ, bạn có thể sử dụng tiện ích “npm install”

Tại thời điểm này, bạn có thể chạy tác vụ đầu tiên của mình. Chạy lệnh sau và xem tất cả các tệp SCSS trong thư mục /scss được biên dịch thành CSS trong thư mục tương ứng

gulp scss

Lưu ý rằng trong ví dụ này, chúng tôi đang chỉ định tác vụ sẽ được chạy. Nếu chúng tôi bỏ qua tên tác vụ, tên có tên "mặc định" sẽ được chạy

Hướng dẫn mã

Điều trên được thực hiện chỉ trong 7 dòng mã JavaScript. Chắc chắn, bạn sẽ cảm thấy như ở nhà một khi bạn nắm bắt được sự đơn giản của nó

var gulp = require['gulp'];
var scss = require['gulp-sass'];

Ban đầu, chúng tôi khởi tạo tất cả các plugin mà chúng tôi sẽ sử dụng. Gulp là thứ duy nhất chúng ta không thể thiếu

gulp.task['scss', function[] {

Chúng tôi xác định nhiệm vụ có tên là scss

return gulp.src['scss/*.scss']

Đặt các tệp nguồn cho tác vụ. Chúng được định nghĩa là quả cầu. Trong ví dụ này, chúng tôi đề cập đến tất cả các tệp trong thư mục “scss/” kết thúc bằng “. scss”

Tại thời điểm này, chúng tôi gọi plugin gulp-sass mà chúng tôi đã xác định trước đó

.pipe[gulp.dest['css']];

Cuối cùng, chúng tôi sử dụng “gulp. dest” để xác định thư mục đích cho các tệp của chúng tôi. Đây cũng có thể là một tên tệp duy nhất nếu các tệp được nối

Để cải thiện hơn nữa việc triển khai tự động hóa quy trình này, bạn có thể thử thêm một vài plugin Gulp khác. Chẳng hạn, bạn có thể muốn thu nhỏ sản phẩm cuối cùng của tác vụ bằng cách sử dụng gulp-minify-css và tự động thêm tiền tố của nhà cung cấp bằng gulp-autoprefixer

Sử dụng một Watcher

Tôi đã tạo một bộ công cụ dành cho người theo dõi mà bạn có thể sử dụng ngay lập tức. Bạn có thể tải xuống từ toptal-gulp-tutorial/step2. Nó bao gồm một phiên bản nâng cao của tác vụ SCSS đã tạo trước đó và một trình theo dõi xem các tệp nguồn và gọi tác vụ. Để bắt đầu nó, hãy sử dụng lệnh sau

sudo npm install gulp -g

Lệnh này bắt đầu tác vụ “mặc định” khởi tạo trình theo dõi. Tại thời điểm này, bạn có thể chỉnh sửa bất kỳ tệp SCSS nào và xem các tệp CSS được biên dịch lại. Bạn sẽ có thể thấy thông báo của Gulp trong dòng lệnh

Hướng dẫn mã

Chúng tôi đã thiết lập trình theo dõi cho nhiệm vụ của mình chỉ với 3 dòng mã bổ sung. Điều đó nói rằng, bộ công cụ khởi động của người theo dõi không khác nhiều so với ví dụ giới thiệu. Trong phần này, chúng ta sẽ đi qua tất cả các bổ sung và thay đổi

sudo npm install gulp -g

Trong ví dụ này, nguồn Gulp được cung cấp với một mảng khối cầu. Cái đầu tiên bao gồm tất cả các tệp kết thúc bằng “. scss” cũng có trong các thư mục con và thư mục thứ hai loại trừ những thư mục bắt đầu bằng “_”. Bằng cách này, chúng ta có thể sử dụng chức năng có sẵn của SCSS @import để nối _page. tập tin scss

sudo npm install gulp -g

Ở đây chúng tôi xác định nhiệm vụ “mặc định”. Tác vụ “scss” được chạy dưới dạng phụ thuộc trước “mặc định”

sudo npm install gulp -g

Cuối cùng, chúng tôi gọi chức năng xem của Gulp để trỏ vào bất kỳ tệp nào kết thúc bằng “. scss” và bất cứ khi nào có sự kiện thay đổi xảy ra, để chạy tác vụ “scss”

Bây giờ bạn đã sẵn sàng tạo trình theo dõi mới cho các quy trình tự động khác như nối JavaScript, gợi ý mã, biên dịch CoffeeScript hoặc bất kỳ thứ gì khác mà bạn có thể nghĩ đến. Để tìm hiểu sâu hơn về triển khai tự động hóa JavaScript này, tôi đề xuất thêm gulp-notify sẽ thông báo cho bạn khi một tác vụ được chạy. Ngoài ra, bạn có thể tạo một tác vụ riêng biệt để thu nhỏ mã CSS kết quả và làm cho tác vụ “scss” chạy dưới dạng phụ thuộc vào tác vụ đó. Cuối cùng, bạn có thể sử dụng gulp-rename để thêm “. min” vào các tập tin kết quả

Plugin Gulp nâng cao để tự động hóa JavaScript

Có hàng ngàn plugin trong cơ sở plugin của Gulp, một số plugin vượt xa khả năng tự động hóa JavaScript đơn giản của quy trình xây dựng. Dưới đây là một vài ví dụ nổi bật

Đồng bộ hóa trình duyệt

BrowserSync chèn CSS, JavaScript và tự động làm mới trình duyệt bất cứ khi nào có thay đổi. Ngoài ra, nó chứa tính năng ghostMode có thể được sử dụng để dọa đồng nghiệp của bạn hoặc tăng tốc đáng kể việc kiểm tra trình duyệt của bạn

trình duyệt

Browserify phân tích các cuộc gọi "yêu cầu" trong ứng dụng của bạn và chuyển đổi nó thành một tệp JavaScript được đóng gói. Ngoài ra, có một danh sách các gói npm có thể được chuyển đổi thành mã trình duyệt

gói web

Tương tự như Browserify, Webpack nhằm mục đích chuyển đổi các mô-đun có phụ thuộc thành tệp tĩnh. Cái này mang lại nhiều tự do hơn cho người dùng về cách thiết lập các phụ thuộc mô-đun và không nhằm mục đích tuân theo Nút. kiểu mã của js

Nghiệp

Gulp-karma mang đến môi trường thử nghiệm khét tiếng cho Gulp. Karma tuân theo cách tiếp cận ít cấu hình nhất mà Gulp cũng tán thành

Phần kết luận

Trong hướng dẫn tự động hóa quy trình này, tôi đã chứng minh vẻ đẹp và sự đơn giản của việc sử dụng Gulp làm công cụ xây dựng. Bằng cách làm theo các bước được mô tả trong hướng dẫn, giờ đây bạn sẽ sẵn sàng tự động hóa hoàn toàn quy trình phát triển phần mềm của mình cả trong tương lai và các dự án kế thừa của bạn. Đầu tư một chút thời gian vào việc thiết lập một hệ thống xây dựng cho các dự án cũ của bạn chắc chắn sẽ giúp bạn tiết kiệm thời gian quý báu trong tương lai

Hãy theo dõi để sớm có hướng dẫn Gulp nâng cao hơn

Có liên quan. Nhu cầu về tốc độ. Nhìn lại thử thách mã hóa JavaScript hàng đầu

Thẻ

Người làm việc tự do? Tìm công việc tiếp theo của bạn.

Nút. Việc làm lập trình viên js

Xem thông tin đầy đủ

Antonios Minas

Kỹ sư phần mềm tự do

Thông tin về các Tác giả

Antonios là kỹ sư phần mềm cao cấp chuyên về giao diện người dùng, WordPress, công nghệ Chuỗi khối, PHP và khung JavaScript với hơn tám năm kinh nghiệm chuyên môn trải dài từ lĩnh vực CNTT đến quảng cáo kỹ thuật số. Anh ấy đam mê áp dụng các giải pháp hàng đầu và các mẫu công nghệ phần mềm để giải quyết các vấn đề phức tạp

Thuê Antonios

Bình luận

Evan Wieland

Này, bài viết tuyệt vời Antonios. Tôi đã muốn chuyển từ grunt sang thử gulp được một thời gian rồi, nhưng thậm chí không có thời gian để xem xét những khác biệt cơ bản giữa gulp và grunt. Tôi thích gulp sạch như thế nào. Cảm ơn vì cái nhìn sâu sắc này. @Luboš, cả danh tiếng về nghệ thuật nữa. Trông thật tuyệt

Evan Wieland

Này, bài viết tuyệt vời Antonios. Tôi đã muốn chuyển từ grunt sang thử gulp được một thời gian rồi, nhưng thậm chí không có thời gian để xem xét những khác biệt cơ bản giữa gulp và grunt. Tôi thích gulp sạch như thế nào. Cảm ơn vì cái nhìn sâu sắc này. @Luboš, cả danh tiếng về nghệ thuật nữa. Trông thật tuyệt

Kichrum

Tôi thực sự khuyến khích bạn không thực hiện quản lý gói với sudo. Tốt hơn hết là chạy một lần lệnh như thế này. sudo chown -R $USER /usr/local/bin và sau đó bạn sẽ có khả năng cài đặt hầu hết các mô-đun npm trên toàn cầu mà không cần sudo. Đồng bộ hóa các luồng trong gulp vẫn chưa đủ tốt. Nhưng nó rất tốt cho bất kỳ thứ gì khác liên quan đến việc xây dựng các ứng dụng js/cà phê. ] Cảm ơn bác Antonios vì một chuyến tham quan khá sâu để nuốt nước bọt

Kichrum

Tôi thực sự khuyến khích bạn không thực hiện quản lý gói với sudo. Tốt hơn hết là chạy một lần lệnh như thế này. sudo chown -R $USER /usr/local/bin và sau đó bạn sẽ có khả năng cài đặt hầu hết các mô-đun npm trên toàn cầu mà không cần sudo. Đồng bộ hóa các luồng trong gulp vẫn chưa đủ tốt. Nhưng nó rất tốt cho bất kỳ thứ gì khác liên quan đến việc xây dựng các ứng dụng js/cà phê. ] Cảm ơn bác Antonios vì một chuyến tham quan khá sâu để nuốt nước bọt

Shahzad Nawaz

Hướng dẫn hay cho Giới thiệu gulp

Shahzad Nawaz

Hướng dẫn hay cho Giới thiệu gulp

Filip Sotirov

Này, hãy xem gulp-ruby-sass;]

Filip Sotirov

Này, hãy xem gulp-ruby-sass;]

Gavin Engel

Tôi đồng ý, sử dụng npm install -g là điều nên tránh. Trong trường hợp bạn hoàn toàn không được phép sudo, bạn có thể sử dụng phương pháp này cho ~/bin/_npm. https. //ý chính. github. com/gavinengel/1842179837823dc25730

Gavin Engel

Tôi đồng ý, sử dụng npm install -g là điều nên tránh. Trong trường hợp bạn hoàn toàn không được phép sudo, bạn có thể sử dụng phương pháp này cho ~/bin/_npm. https. //ý chính. github. com/gavinengel/1842179837823dc25730

Gavin Engel

Chỉ là một nỗi đau trong mông. có một số người coi gulp/grunt là thừa. Vì các lệnh bash/zsh có sẵn cho người dùng Windows với git shell/cygwin, nên bạn chắc chắn có thể tránh gulp/grunt cho các tập lệnh xây dựng và chỉ cần sử dụng các tập lệnh npm run. http. // ngăn xếp con. net/task_automation_with_npm_run

Gavin Engel

Chỉ là một nỗi đau trong mông. có một số người coi gulp/grunt là thừa. Vì các lệnh bash/zsh có sẵn cho người dùng Windows với git shell/cygwin, nên bạn chắc chắn có thể tránh gulp/grunt cho các tập lệnh xây dựng và chỉ cần sử dụng các tập lệnh npm run. http. // ngăn xếp con. net/task_automation_with_npm_run

Filip Dupanović

Đọc châm biếm trên. /nhiệm vụ. js trước khi bạn chuyển mình thành một trình chạy tác vụ https. //ý chính. github. com/ngăn con/8313379

Filip Dupanović

Đọc châm biếm trên. /nhiệm vụ. js trước khi bạn chuyển mình thành một trình chạy tác vụ https. //ý chính. github. com/ngăn con/8313379

Đimitar Ivanov

hướng dẫn tốt đẹp, cảm ơn. Ngoài ra, để theo dõi các thay đổi, hãy sử dụng plugin gulp-watch. Xem như thế nào. http. //zinoui. com/blog/task-automation-with-gulp-js

Đimitar Ivanov

hướng dẫn tốt đẹp, cảm ơn. Ngoài ra, để theo dõi các thay đổi, hãy sử dụng plugin gulp-watch. Xem như thế nào. http. //zinoui. com/blog/task-automation-with-gulp-js

Baaddin Baaddin

Xin chào, cảm ơn vì bài viết tuyệt vời này. tôi muốn hỏi điều này khi chúng tôi sử dụng gulp trong môi trường nhà phát triển như sử dụng ở địa phương và khi chúng tôi cần thực hiện thay đổi trong js hoặc sass, chúng tôi có thể làm gì? . xin vui lòng cho tôi biết làm thế nào chúng ta làm điều đó?

Tự động hóa trong nút JS là gì?

Làm cách nào để tự động hóa bằng nút js?

Bạn có thể tự động hóa với js không?

Làm cách nào để sử dụng js để tự động hóa?