Cách sử dụng Selenium IDE với Scripts & Lệnh (Khẳng định, Xác minh)

Chúng tôi sẽ sử dụng trang web Mercury Tours làm ứng dụng web đang được thử nghiệm. Nó là một hệ thống đặt vé máy bay trực tuyến có chứa tất cả các yếu tố chúng tôi cần cho hướng dẫn này. URL của nó là http://demo.guru99.com/test/newtours/ và đây sẽ là URL cơ sở của chúng tôi.

Tạo tập lệnh bằng cách ghi

Bây giờ chúng ta hãy tạo tập lệnh thử nghiệm đầu tiên của mình trong Selenium IDE bằng phương pháp phổ biến nhất - bằng cách ghi lại. Sau đó, chúng tôi sẽ thực thi tập lệnh của mình bằng tính năng phát lại.

Bước 1

Khởi chạy Firefox và Selenium IDE.
Nhập giá trị cho URL cơ sở của chúng tôi: http://demo.guru99.com/test/newtours/.
Bật nút Ghi (nếu nó chưa được bật theo mặc định).

Bước 2 Trong Firefox, điều hướng đến http://demo.guru99.com/test/newtours/. Firefox sẽ đưa bạn đến trang tương tự như trang bên dưới.
Bước 3 Nhấp chuột phải vào bất kỳ khoảng trống nào trong trang, như trên biểu trưng Mercury Tours ở góc trên bên trái. Thao tác này sẽ hiển thị menu ngữ cảnh Selenium IDE. Lưu ý: Không nhấp vào bất kỳ đối tượng hoặc hình ảnh siêu liên kết nào Chọn tùy chọn "Hiển thị các lệnh có sẵn". Sau đó, chọn "khẳng định chính xác: Chào mừng: Mercury Tours." Đây là lệnh đảm bảo rằng tiêu đề trang là chính xác.

Bước 4 Trong hộp văn bản "Tên người dùng" của Mercury Tours, hãy nhập tên người dùng không hợp lệ, "invalidUNN". Trong hộp văn bản "Mật khẩu", hãy nhập mật khẩu không hợp lệ, "invalidPWD".

Bước 5 Nhấp vào nút "Đăng nhập". Firefox sẽ đưa bạn đến trang này.
Bước 6 Tắt nút ghi để dừng ghi. Tập lệnh của bạn bây giờ sẽ trông giống như được hiển thị bên dưới.
Bước 7 Bây giờ chúng ta đã hoàn thành tập lệnh thử nghiệm của mình, chúng ta sẽ lưu nó trong một trường hợp thử nghiệm. Trong menu Tệp, chọn "Lưu Trường hợp Kiểm tra". Ngoài ra, bạn có thể chỉ cần nhấn Ctrl + S.
Bước 8 Chọn vị trí mong muốn của bạn, và sau đó đặt tên cho Trường hợp kiểm tra là "Không hợp lệ_login". Nhấp vào nút "Lưu".
Bước 9. Lưu ý rằng tệp đã được lưu dưới dạng HTML.

Bước 10.

Quay lại Selenium IDE và nhấp vào nút Phát lại để thực thi toàn bộ tập lệnh. Selenium IDE có thể sao chép mọi thứ một cách hoàn hảo.

Giới thiệu về Lệnh Selenium - Selenese

Lệnh Selenese có thể có tối đa hai tham số: đích và giá trị.
Các thông số không được yêu cầu mọi lúc. Nó phụ thuộc vào số lượng lệnh sẽ cần.

3 loại lệnh

Hành động

Đây là các lệnh tương tác trực tiếp với các phần tử của trang.

Ví dụ: lệnh "click" là một hành động do bạn tương tác trực tiếp với phần tử mà bạn đang nhấp vào.

Lệnh "type" cũng là một hành động vì bạn đang đặt các giá trị vào một hộp văn bản và hộp văn bản sẽ hiển thị chúng cho bạn. Có một sự tương tác hai chiều giữa bạn và hộp văn bản.

Người truy cập

Chúng là các lệnh cho phép bạn lưu trữ các giá trị vào một biến.

Ví dụ: lệnh "storeTitle" là một công cụ truy cập vì nó chỉ "đọc" tiêu đề trang và lưu nó trong một biến. Nó không tương tác với bất kỳ phần tử nào trên trang.

Khẳng định

Chúng là các lệnh xác minh xem một điều kiện nhất định có được đáp ứng hay không.

3 loại khẳng định

Khẳng định . Khi một lệnh "khẳng định" không thành công, quá trình kiểm tra sẽ bị dừng ngay lập tức.
Xác minh . Khi lệnh "xác minh" không thành công, Selenium IDE ghi lại lỗi này và tiếp tục thực hiện kiểm tra.
WaitFor . Trước khi thực hiện lệnh tiếp theo, các lệnh "waitFor" trước tiên sẽ đợi một điều kiện nào đó trở thành true.
- Nếu điều kiện trở thành đúng trong thời gian chờ đợi, bước này sẽ vượt qua.
- Nếu điều kiện không trở thành đúng, bước này không thành công. Lỗi được ghi lại và quá trình thực thi kiểm tra sẽ chuyển sang lệnh tiếp theo.
- Theo mặc định, giá trị thời gian chờ được đặt thành 30 giây. Bạn có thể thay đổi điều này trong hộp thoại Tùy chọn Selenium IDE trong tab Chung.

Khẳng định so với Xác minh

Các lệnh chung

Chỉ huy	Số tham số	Sự miêu tả
mở	0 - 2	Mở trang bằng URL.
click / clickAndWait	1	Nhấp vào một phần tử được chỉ định.
type / typeKeys	2	Nhập một chuỗi ký tự.
verifyTitle / khẳng địnhTitle	1	So sánh tiêu đề trang thực tế với giá trị mong đợi.
verifyTextPresent	1	Kiểm tra xem một văn bản nhất định có được tìm thấy trong trang hay không.
verifyElementPresent	1	Kiểm tra sự hiện diện của một phần tử nhất định.
verifyTable	2	So sánh nội dung của một bảng với các giá trị mong đợi.
waitForPageToLoad	1	Tạm dừng thực thi cho đến khi trang được tải hoàn toàn.
waitForElementPresent	1	Tạm dừng thực thi cho đến khi phần tử được chỉ định xuất hiện.

Tạo tập lệnh theo cách thủ công với Firebug

Bây giờ, chúng ta sẽ tạo lại cùng một trường hợp thử nghiệm theo cách thủ công, bằng cách nhập các lệnh. Lần này, chúng ta sẽ cần sử dụng Firebug.

Bước 1

Mở Firefox và Selenium IDE.
Nhập URL cơ sở (http://demo.guru99.com/test/newtours/).
Nút ghi phải TẮT.

Bước 2: Nhấp vào dòng trống trên cùng trong Trình chỉnh sửa.

Nhập "mở" vào hộp văn bản Lệnh và nhấn Enter.

Bước 3

Điều hướng Firefox đến URL cơ sở của chúng tôi và kích hoạt Firebug
Trong ngăn Selenium IDE Editor, chọn dòng thứ hai (dòng bên dưới lệnh "mở") và tạo lệnh thứ hai bằng cách gõ "khẳng địnhTitle" trên hộp lệnh.
Hãy sử dụng tính năng tự động hoàn thành.

Bước 4

Trong Firebug, hãy mở rộng thẻ để hiển thị thẻ .</li> <li>Nhấp vào giá trị của thẻ <title> (là "Chào mừng: Chuyến tham quan Mercury") và dán nó vào trường Mục tiêu trong Trình chỉnh sửa.</li> </ul> </td> </tr> <tr> <td><strong>Bước 5</strong> <ul> <li>Để tạo lệnh thứ ba, hãy nhấp vào dòng trống thứ ba trong Trình chỉnh sửa và nhập "gõ" vào hộp văn bản Lệnh.</li> <li>Trong Firebug, nhấp vào nút "Kiểm tra".</li> </ul> </td> </tr> <tr> <td>Bấm vào hộp văn bản Tên người dùng. Lưu ý rằng Firebug tự động hiển thị cho bạn mã HTML cho phần tử đó.</td> </tr> <tr> <td><strong>Bước 6</strong> <p>Lưu ý rằng hộp văn bản Tên người dùng không có ID, nhưng nó có thuộc tính NAME. Do đó, chúng tôi sẽ sử dụng TÊN của nó làm công cụ định vị. Sao chép giá trị NAME và dán nó vào trường Target trong Selenium IDE.</p> <p>Vẫn trong hộp văn bản Target, tiền tố "userName" với "name =", cho biết rằng Selenium IDE nên nhắm mục tiêu một phần tử có thuộc tính NAME là "userName."</p> <p>Nhập "invalidUN" vào hộp văn bản Giá trị của Selenium IDE. Kịch bản thử nghiệm của bạn bây giờ sẽ giống như hình ảnh bên dưới. Chúng tôi đã thực hiện xong với lệnh thứ ba. Lưu ý: Thay vì không hợp lệUN, bạn có thể nhập bất kỳ chuỗi văn bản nào khác. Nhưng Selenium IDE phân biệt chữ hoa chữ thường và bạn nhập các giá trị / thuộc tính giống hệt như trong ứng dụng.</p> </td> </tr> <tr> <td><strong>Bước 7</strong> <ul> <li>Để tạo lệnh thứ tư, hãy nhập "gõ" vào hộp văn bản Lệnh.</li> <li>Một lần nữa, sử dụng nút "Kiểm tra" của Firebug để lấy bộ định vị cho hộp văn bản "Mật khẩu".</li> </ul> <ul> <li> <p>Dán thuộc tính NAME ("mật khẩu") vào trường Target và đặt tiền tố bằng "name ="</p> </li> <li> <p>Nhập "invalidPW" vào trường Giá trị trong Selenium IDE. Kịch bản thử nghiệm của bạn bây giờ sẽ giống như hình ảnh bên dưới.</p> </li> </ul> </td> </tr> <tr> <td><strong>Bước 8</strong> <ul> <li>Đối với lệnh thứ năm, gõ "clickAndWait" vào hộp văn bản Lệnh trong Selenium IDE.</li> <li>Sử dụng nút "Kiểm tra" của Firebug để lấy bộ định vị cho nút "Đăng nhập".</li> </ul> <ul> <li>Dán giá trị của thuộc tính NAME ("đăng nhập") vào hộp văn bản Target và đặt tiền tố bằng "name =".</li> <li>Kịch bản thử nghiệm của bạn bây giờ sẽ giống như hình ảnh bên dưới.</li> </ul> </td> </tr> </tbody> </table> <p><strong>Bước 9:</strong> Lưu trường hợp thử nghiệm theo cách tương tự như chúng ta đã làm trong phần trước.</p> <a id="menu-6"></a> <h2>Sử dụng nút Tìm</h2> <p><strong>Nút Tìm trong Selenium IDE được sử dụng để xác minh xem những gì chúng tôi đã đặt trong hộp văn bản Mục tiêu có thực sự là phần tử giao diện người dùng chính xác hay không.</strong></p> <p>Hãy để chúng tôi sử dụng trường hợp kiểm thử Invalid_login mà chúng tôi đã tạo trong các phần trước. Nhấp vào bất kỳ lệnh nào có mục Target, chẳng hạn như lệnh thứ ba.</p> <p>Bấm vào nút Tìm. Lưu ý rằng hộp văn bản Tên người dùng trong trang Mercury Tours sẽ được tô sáng trong một giây.</p> <p>Điều này chỉ ra rằng Selenium IDE đã có thể phát hiện và truy cập vào phần tử mong đợi một cách chính xác. Nếu nút Tìm đánh dấu một phần tử khác hoặc không có phần tử nào, thì chắc chắn có điều gì đó không ổn với tập lệnh của bạn.</p> <a id="menu-7"></a> <h2>Thực thi lệnh</h2> <p><strong>Điều này cho phép bạn thực hiện bất kỳ lệnh đơn lẻ nào mà không cần chạy toàn bộ trường hợp thử nghiệm</strong> . Chỉ cần nhấp vào dòng bạn muốn thực hiện và sau đó nhấp vào "Hành động> Thực hiện lệnh này" từ thanh menu hoặc chỉ cần nhấn "X" trên bàn phím của bạn.</p> <p><strong>Bước 1.</strong> Đảm bảo rằng trình duyệt của bạn đang ở trên trang chủ Mercury Tours. Nhấp vào lệnh bạn muốn thực hiện. Trong ví dụ này, hãy nhấp vào dòng "type | userName | invalidUN".</p> <p><strong>Bước 2.</strong> Nhấn "X" trên bàn phím của bạn.</p> <p><strong>Bước 3.</strong> Quan sát rằng hộp văn bản cho tên người dùng trở nên phổ biến với văn bản "invalidUN"</p> <p><strong>Việc thực thi các lệnh theo cách này phụ thuộc nhiều vào trang mà Firefox hiện đang hiển thị</strong> . Điều này có nghĩa là nếu bạn thử ví dụ trên với trang chủ Google được hiển thị thay vì Mercury Tours ', thì bước của bạn sẽ không thành công vì không có hộp văn bản có thuộc tính "userName" trong trang chủ của Google.</p> <a id="menu-8"></a> <h2>Điểm xuất phát</h2> <p><strong>Điểm bắt đầu là một chỉ báo cho Selenium IDE biết dòng nào sẽ bắt đầu thực thi</strong> . <strong>Phím tắt của nó là "S".</strong></p> <p>Trong ví dụ trên, quá trình phát lại sẽ bắt đầu trên dòng thứ ba (gõ | mật khẩu | không hợp lệPW). <strong>Bạn chỉ có thể có một điểm bắt đầu trong một tập lệnh thử nghiệm duy nhất.</strong></p> <p>Điểm bắt đầu tương tự như Execute Command ở chỗ chúng phụ thuộc vào trang được hiển thị hiện tại. Điểm bắt đầu sẽ không thành công nếu bạn đang ở trên trang sai.</p> <a id="menu-9"></a> <h2>Điểm ngắt</h2> <p>Điểm ngắt là các chỉ báo cho Selenium IDE biết nơi tự động tạm dừng kiểm tra. <strong>Phím tắt là "B".</strong></p> <p>Đánh dấu màu vàng có nghĩa là bước hiện tại đang chờ xử lý. Điều này chứng tỏ rằng Selenium IDE đã tạm dừng thực thi ở bước đó. <strong>Bạn có thể có nhiều điểm ngắt trong một trường hợp thử nghiệm.</strong></p> <a id="menu-10"></a> <h2>Bươc</h2> <p>Nó cho phép bạn thực hiện các lệnh tiếp theo lần lượt sau khi tạm dừng trường hợp thử nghiệm. Chúng ta hãy sử dụng kịch bản trong phần trước "Điểm ngắt".</p> <table> <tbody> <tr> <td width="50%"> </td> <td> <p><strong>Trước khi nhấp vào "Bước".</strong></p> <p>Trường hợp kiểm tra tạm dừng ở dòng "clickAndWait | đăng nhập".</p> </td> </tr> <tr> <td width="50%"> </td> <td> <p><strong>Sau khi nhấp vào "Bước".</strong></p> <p>Dòng "clickAndWait | login" được chạy và tạm dừng ở lệnh tiếp theo (verifyTitle | Sign-on: Mercury Tours).</p> <p>Lưu ý rằng dòng tiếp theo bị tạm dừng mặc dù không có điểm ngắt ở đó. Đây là mục đích chính của tính năng Bước - nó thực hiện các lệnh tiếp theo lần lượt để bạn có thêm thời gian kiểm tra kết quả sau mỗi bước.</p> </td> </tr> </tbody> </table> <a id="menu-11"></a> <h2>Những điều quan trọng cần lưu ý khi sử dụng các định dạng khác trong chế độ xem nguồn</h2> <p><strong>Selenium IDE chỉ hoạt động tốt với HTML - các định dạng khác vẫn đang ở chế độ thử nghiệm</strong> . Đó là <strong>KHÔNG nên</strong> để tạo hoặc chỉnh sửa các bài kiểm tra sử dụng các định dạng khác trong Source Xem vì vẫn còn rất nhiều công việc cần thiết để làm cho nó ổn định. Dưới đây là các lỗi đã biết kể từ phiên bản 1.9.1.</p> <ul> <li>Bạn sẽ không thể thực hiện phát lại hoặc chuyển trở lại Chế độ xem bảng trừ khi bạn hoàn nguyên về HTML.</li> <li>Cách duy nhất để thêm các lệnh một cách an toàn vào mã nguồn là ghi lại chúng.</li> <li>Khi bạn sửa đổi mã nguồn theo cách thủ công, tất cả mã nguồn sẽ bị mất khi bạn chuyển sang định dạng khác.</li> <li>Mặc dù bạn có thể lưu trường hợp thử nghiệm của mình trong khi ở Chế độ xem nguồn, Selenium IDE sẽ không thể mở nó.</li> </ul> <p><strong>Cách được khuyến nghị để chuyển đổi các bài kiểm tra Selenese là sử dụng tùy chọn "Export Test Case As…" trong menu Tệp chứ không phải qua Chế độ xem Nguồn.</strong></p> <a id="menu-12"></a> <h2>Tóm lược</h2> <ul> <li>Các kịch bản kiểm tra có thể được tạo bằng cách ghi lại hoặc nhập các lệnh và thông số theo cách thủ công.</li> <li>Khi tạo script theo cách thủ công, Firebug được sử dụng để lấy bộ định vị.</li> <li>Nút Tìm được sử dụng để kiểm tra xem lệnh có thể truy cập đúng phần tử hay không.</li> <li>Chế độ xem Bảng hiển thị một tập lệnh thử nghiệm ở dạng bảng trong khi Chế độ xem Nguồn hiển thị nó ở định dạng HTML.</li> <li>Việc thay đổi Chế độ xem nguồn sang định dạng không phải HTML vẫn còn đang thử nghiệm.</li> <li>Không sử dụng Chế độ xem nguồn trong việc tạo thử nghiệm ở các định dạng khác. Sử dụng các tính năng Xuất thay thế.</li> <li>Các thông số không được yêu cầu mọi lúc. Nó phụ thuộc vào lệnh.</li> <li>Có ba loại lệnh:</li> <ul> <li>Các hành động - tương tác trực tiếp với các phần tử trang</li> <li>Accessors - "đọc" một thuộc tính phần tử và lưu trữ nó trong một biến</li> <li>Khẳng định - so sánh một giá trị thực tế với một giá trị mong đợi</li> </ul> <li>Khẳng định có ba loại:</li> <ul> <li>Khẳng định - khi thất bại, các bước tiếp theo không còn được thực hiện nữa</li> <li>Xác minh - khi thất bại, các bước tiếp theo vẫn được thực hiện.</li> <li>WaitFor - vượt qua nếu điều kiện được chỉ định trở thành đúng trong khoảng thời gian chờ; nếu không, nó sẽ thất bại</li> </ul> <li>Các lệnh phổ biến nhất là:</li> <ul> <li>mở</li> <li>click / clickAndWait</li> <li>type / typeKeys</li> <li>verifyTitle / khẳng địnhTitle</li> <li>verifyTextPresent</li> <li>verifyElementPresent</li> <li>verifyTable</li> <li>waitForPageToLoad</li> <li>waitForElementPresent</li> </ul> </ul> </div> </article> <div id="container-5533149ee6411a5f99b370c693e87966"></div> </div> </div> </div> </div> </div> <aside class="col-lg-4 sidebar sidebar--right"> <div class="widget widget-popular-posts"> <h2 class="widget-title">Bài ViếT Phổ BiếN</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8225890-20-best-free-anti-spyware-malware-removal-tools" title="Hơn 20 công cụ diệt phần mềm gián điệp (phần mềm độc hại) MIỄN PHÍ tốt nhất" rel="bookmark"><img src="https://cdn.css-code.org/3396525/20_best_free_anti_spyware_malware_removal_tools.png.webp" loading="lazy" alt="Hơn 20 công cụ diệt phần mềm gián điệp (phần mềm độc hại) MIỄN PHÍ tốt nhất" title="Hơn 20 công cụ diệt phần mềm gián điệp (phần mềm độc hại) MIỄN PHÍ tốt nhất" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8225890-20-best-free-anti-spyware-malware-removal-tools" title="Hơn 20 công cụ diệt phần mềm gián điệp (phần mềm độc hại) MIỄN PHÍ tốt nhất" rel="bookmark">Hơn 20 công cụ diệt phần mềm gián điệp (phần mềm độc hại) MIỄN PHÍ tốt nhất 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8225892-15-best-digital-forensic-tools-in-2021-freepaid" title="15 công cụ pháp y kỹ thuật số TỐT NHẤT năm 2021 (Miễn phí / Trả phí)" rel="bookmark"><img src="https://cdn.css-code.org/9453024/15_best_digital_forensic_tools_in_2021_freepaid.png.webp" loading="lazy" alt="15 công cụ pháp y kỹ thuật số TỐT NHẤT năm 2021 (Miễn phí / Trả phí)" title="15 công cụ pháp y kỹ thuật số TỐT NHẤT năm 2021 (Miễn phí / Trả phí)" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8225892-15-best-digital-forensic-tools-in-2021-freepaid" title="15 công cụ pháp y kỹ thuật số TỐT NHẤT năm 2021 (Miễn phí / Trả phí)" rel="bookmark">15 công cụ pháp y kỹ thuật số TỐT NHẤT năm 2021 (Miễn phí / Trả phí) 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8225893-22-best-cyber-security-software-tools-in-2021" title="22 Công cụ Phần mềm An ninh Mạng TỐT NHẤT năm 2021" rel="bookmark"><img src="https://cdn.css-code.org/3495155/22_best_cyber_security_software_tools_in_2021.png.webp" loading="lazy" alt="22 Công cụ Phần mềm An ninh Mạng TỐT NHẤT năm 2021" title="22 Công cụ Phần mềm An ninh Mạng TỐT NHẤT năm 2021" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8225893-22-best-cyber-security-software-tools-in-2021" title="22 Công cụ Phần mềm An ninh Mạng TỐT NHẤT năm 2021" rel="bookmark">22 Công cụ Phần mềm An ninh Mạng TỐT NHẤT năm 2021 2025</a></h3> </div> </div> </li> </ul> </div> <div class="widget widget-popular-posts"> <h2 class="widget-title">đánh giá tốt nhất trong tháng</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004017-css-triangle-mixin" title="CSS Tam giác Mixin - Thủ thuật CSS" rel="bookmark">CSS Tam giác Mixin - Thủ thuật CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004018-custom-scrollbars-mixin" title="Thanh cuộn tùy chỉnh Mixin - Thủ thuật CSS" rel="bookmark">Thanh cuộn tùy chỉnh Mixin - Thủ thuật CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004019-deep-getset-in-maps" title="Nhận / Đặt sâu trong Bản đồ - Thủ thuật CSS" rel="bookmark">Nhận / Đặt sâu trong Bản đồ - Thủ thuật CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004020-easing-map-get-function" title="Chức năng Easing Map Get - Thủ thuật CSS" rel="bookmark">Chức năng Easing Map Get - Thủ thuật CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004021-fix-a-number-to-n-digits" title="Sửa một số thành N chữ số - Thủ thuật CSS" rel="bookmark">Sửa một số thành N chữ số - Thủ thuật CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004022-extend-wrapper-a-k-a-mixtend" title="@extend Wrapper hay còn gọi là Mixtend - Thủ thuật CSS" rel="bookmark">@extend Wrapper hay còn gọi là Mixtend - Thủ thuật CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004023-functional-programming-functions" title="Chức năng Lập trình Chức năng - Thủ thuật CSS" rel="bookmark">Chức năng Lập trình Chức năng - Thủ thuật CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004024-color-luminance-function" title="Chức năng Độ chói màu - Thủ thuật CSS" rel="bookmark">Chức năng Độ chói màu - Thủ thuật CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004025-mixin-to-manage-breakpoints" title="Mixin để quản lý các điểm ngắt - Thủ thuật CSS" rel="bookmark">Mixin để quản lý các điểm ngắt - Thủ thuật CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004026-mixin-for-offset-positioning" title="Mixin để định vị bù đắp - Thủ thuật CSS" rel="bookmark">Mixin để định vị bù đắp - Thủ thuật CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004027-material-shadows-mixin" title="Material Shadows Mixin - Thủ thuật CSS" rel="bookmark">Material Shadows Mixin - Thủ thuật CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004028-maintain-aspect-ratio-mixin" title="Duy trì tỷ lệ khung hình Mixin - Thủ thuật CSS" rel="bookmark">Duy trì tỷ lệ khung hình Mixin - Thủ thuật CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004029-mixin-to-qualify-a-selector" title="Mixin để đủ tiêu chuẩn một người chọn - Thủ thuật CSS" rel="bookmark">Mixin để đủ tiêu chuẩn một người chọn - Thủ thuật CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004030-mixin-to-prefix-properties" title="Mixin đến Thuộc tính tiền tố - Thủ thuật CSS" rel="bookmark">Mixin đến Thuộc tính tiền tố - Thủ thuật CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004031-opposite-direction-function" title="Hàm ngược hướng - Thủ thuật CSS" rel="bookmark">Hàm ngược hướng - Thủ thuật CSS</a></h3> </div> </div> </li> </ul> </div> <div id="container-5533149ee6411a5f99b370c693e87966"></div> <div class="widget widget-popular-posts"> <h2 class="widget-title">Bài ViếT ĐầU</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8003003-order" title="Đặt hàng - Thủ thuật CSS" rel="bookmark"><img src="https://cdn.css-code.org/3520315/order_css-tricks.png.webp" loading="lazy" alt="Đặt hàng - Thủ thuật CSS" title="Đặt hàng - Thủ thuật CSS" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003003-order" title="Đặt hàng - Thủ thuật CSS" rel="bookmark">Đặt hàng - Thủ thuật CSS 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8003004-offset-anchor" title="Offset-neo - Thủ thuật CSS" rel="bookmark"><img src="https://cdn.css-code.org/8616636/offset-anchor_css-tricks.jpg.webp" loading="lazy" alt="Offset-neo - Thủ thuật CSS" title="Offset-neo - Thủ thuật CSS" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003004-offset-anchor" title="Offset-neo - Thủ thuật CSS" rel="bookmark">Offset-neo - Thủ thuật CSS 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8003005-orphans" title="Trẻ mồ côi - Thủ thuật CSS" rel="bookmark"><img src="https://cdn.css-code.org/2733336/orphans_css-tricks.png.webp" loading="lazy" alt="Trẻ mồ côi - Thủ thuật CSS" title="Trẻ mồ côi - Thủ thuật CSS" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003005-orphans" title="Trẻ mồ côi - Thủ thuật CSS" rel="bookmark">Trẻ mồ côi - Thủ thuật CSS 2025</a></h3> </div> </div> </li> </ul> </div> </aside> </div> </div> <footer class="footer footer--dark"> <div class="container"> <div class="footer__widgets"> <div class="row"> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">Bài ViếT Phổ BiếN</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003677-responsive-meta-tag" title="Thẻ Meta đáp ứng - Thủ thuật CSS" rel="bookmark">Thẻ Meta đáp ứng - Thủ thuật CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003678-start-a-web-server-with-one-terminal-command-on-os-x" title="Khởi động máy chủ web với một lệnh đầu cuối trên OS X - Thủ thuật CSS" rel="bookmark">Khởi động máy chủ web với một lệnh đầu cuối trên OS X - Thủ thuật CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003679-glyphs" title="Glyphs - Thủ thuật CSS" rel="bookmark">Glyphs - Thủ thuật CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003680-set-iphone-bookmark-icon" title="Đặt biểu tượng dấu trang iPhone - Thủ thuật CSS" rel="bookmark">Đặt biểu tượng dấu trang iPhone - Thủ thuật CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003681-stop-ie-page-load-flicker" title="Dừng nhấp nháy tải trang của IE - Thủ thuật CSS" rel="bookmark">Dừng nhấp nháy tải trang của IE - Thủ thuật CSS</a></h3> </div> </div> </li> </ul> </div> </div> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">Editor Choice</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8002934-font-display" title="Font-display - Thủ thuật CSS" rel="bookmark">Font-display - Thủ thuật CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8002935-font-optical-sizing" title="Font-quang-sizing - Thủ thuật CSS" rel="bookmark">Font-quang-sizing - Thủ thuật CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8002936-font-stretch" title="Phông-dãn - Thủ thuật CSS" rel="bookmark">Phông-dãn - Thủ thuật CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8002937-font-feature-settings" title="Font-tính năng-cài đặt - Thủ thuật CSS" rel="bookmark">Font-tính năng-cài đặt - Thủ thuật CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8002938-font-size-adjust" title="Font-size-điều chỉnh - Thủ thuật CSS" rel="bookmark">Font-size-điều chỉnh - Thủ thuật CSS</a></h3> </div> </div> </li> </ul> </div> </div> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">Bài ViếT ĐầU</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8222478-what-is-workflow-testing-in-software-testing-with-examples" title="Kiểm thử quy trình làm việc trong Kiểm thử phần mềm là gì? với các ví dụ" rel="bookmark">Kiểm thử quy trình làm việc trong Kiểm thử phần mềm là gì? với các ví dụ</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8222479-what-is-interoperability-testing-in-software-testing-with-examples" title="Kiểm tra khả năng tương tác trong Kiểm thử phần mềm là gì? (với các ví dụ)" rel="bookmark">Kiểm tra khả năng tương tác trong Kiểm thử phần mềm là gì? (với các ví dụ)</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8222480-10-code-coverage-tools-for-c-java-python-c-c-net" title="10 Công cụ bao gồm mã cho C, Java, Python, C ++, C #, .Net" rel="bookmark">10 Công cụ bao gồm mã cho C, Java, Python, C ++, C #, .Net</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8222481-what-is-cucumber-testing-tool-framework-introduction" title="Công cụ kiểm tra dưa chuột là gì? Giới thiệu khung" rel="bookmark">Công cụ kiểm tra dưa chuột là gì? Giới thiệu khung</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8222482-how-to-download-and-install-cucumber-in-windows" title="Cách tải xuống & Cài đặt CUCUMBER trong Windows" rel="bookmark">Cách tải xuống & Cài đặt CUCUMBER trong Windows</a></h3> </div> </div> </li> </ul> </div> </div> </div> <p>© Copyright vi.css-code.org, 2025 Tháng Chín | <a href="https://vi.css-code.org/about-site" title="Về trang web">Về trang web</a> | <a href="https://vi.css-code.org/contacts" title="Liên lạc">Liên lạc</a> | <a href="https://vi.css-code.org/privacy-policy" title="Chính sách bảo mật">Chính sách bảo mật</a>. </p> </div> </div> </footer> <link href="https://css-code.org/template/css/style.min.css" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" /> </body> </html>