Điền Biểu Mẫu

Nhận hoặc điền giá trị của một thành phần biểu mẫu (input, select, checkbox và radio). Node này giúp tự động hoá các thao tác điền form trên trang web.

Bộ chọn phần tử

Chọn phần tử và nhập vào bằng bộ chọn phần tử.

Tuỳ chọn bộ chọn

Lựa chọn các tuỳ chọn mong muốn.

Trích xuất giá trị từ biểu mẫu

Khi bật tuỳ chọn này, node sẽ lấy giá trị hiện tại từ biểu mẫu mà không thực hiện hành động chọn hoặc điền.

Gán cho biến

Có thể gán giá trị vào một biến.

• Tên Biến: Tên biến để gán giá trị. Trường này xuất hiện khi người dùng chọn gán cho biến.

Chèn vào bảng

Có thể chèn giá trị vào cột trong bảng.

• Chọn cột: Cột nơi giá trị được chèn. Trường này xuất hiện khi người dùng chọn chèn vào bảng.

Điền văn bản

Điền văn bản vào các trường văn bản như <input> và <textarea>.

Giá Trị

Giá trị muốn điền vào trường văn bản.

Xoá giá trị cũ trước khi điền

Xoá giá trị hiện có của trường văn bản trước khi điền giá trị mới.

Nhập độ trễ

Thêm độ trễ khi điền từng ký tự. Khi đặt thành 0, toàn bộ giá trị sẽ được điền cùng một lúc.

Select

Chọn các lựa chọn trong thẻ select với giá trị nhập vào.

Chú ý

Để sử dụng được lựa chọn này, phần tử cần có dạng thẻ select option value như trong ảnh.

Giá trị

Giá trị của phần tử nằm trong thẻ select.

Giá trị cần điền chính là giá trị của thuộc tính value bên trong thẻ option. Ví dụ, để chọn 4 US thì cần điền giá trị trong thẻ value là 4181830684.

Lựa chọn đầu tiên

Chọn lựa chọn đầu tiên trong danh sách.

Lựa chọn cuối

Chọn lựa chọn cuối cùng trong danh sách.

Lựa chọn thứ tự tuỳ chỉnh

Chọn lựa chọn theo vị trí tuỳ ý trong danh sách.

Xoá giá trị cũ trước khi điền

Xoá giá trị hiện có của trường trước khi chọn giá trị mới.

Checkbox

• Tích chọn / Bỏ chọn: Có thể tích chọn hoặc bỏ tích chọn một checkbox.

Radio

• Tích chọn / Bỏ chọn: Có thể tích chọn hoặc bỏ tích chọn một radio button.

Ví dụ thực tế

Ở đây người dùng muốn chọn các lựa chọn của sản phẩm trước khi thêm vào giỏ hàng.

Đầu tiên, cấu hình node Lấy thuộc tính để lấy tất cả giá trị của thuộc tính option trong các phần tử có selector chung là [data-selector="listing-page-variations"]>div:nth-child(1) select option[value].

Thông thường chỉ lấy giá trị của phần tử đầu tiên phù hợp với selector. Nhưng khi chọn lựa chọn Nhiều thì có thể lấy tất cả giá trị của tất cả phần tử có selector tương ứng.

Sau đó, gán vào biến values. Khi đó biến values sẽ có dạng mảng.

Tiếp theo, cấu hình node Chèn dữ liệu như sau:

• Gán giá trị vào biến lengthV bằng biểu thức tính số lượng phần tử trong biến values chứa danh sách các giá trị option.
• Gán giá trị vào biến lastValue bằng biểu thức trừ (hàm subtract) dùng để tính thứ tự của giá trị cuối cùng trong danh sách.
• Gán giá trị vào biến numValue bằng biểu thức tạo ngẫu nhiên một số nguyên trong khoảng từ 1 đến giá trị của biến lastValue. Ở đây bắt đầu từ 1 vì phần tử đầu tiên trong mảng có giá trị rỗng nên không thể lấy từ vị trí 0.

Sau đó, nối với node Điền biểu mẫu để điền giá trị ngẫu nhiên vừa tạo và cấu hình như sau:

Tương tự, cấu hình cụm node để chọn giá trị ở ô lựa chọn thứ hai giống như ô lựa chọn thứ nhất:

Khi đó cụm node hoàn chỉnh để chọn hai lựa chọn của sản phẩm sẽ như sau: