DOM trong đó là gì Selenium WebDriver: Cấu trúc, dạng đầy đủ

DOM trong đó là gì Selenium Trình điều khiển Web?

DOM in Selenium WebDriver là một thành phần thiết yếu của phát triển web bằng HTML5 và JavaScript. DOM là Document Object Model. DOM không phải là khái niệm khoa học máy tính. Đây là một tập hợp giao diện đơn giản được chuẩn hóa giữa các nhà phát triển web để truy cập và thao tác các tài liệu trong HTML hoặc XML bằng cách sử dụng JavaKịch bản.

Các tiêu chuẩn này giúp các nhà phát triển xây dựng trang web mà không phải lo lắng về chi tiết triển khai. Một số tổ chức tham gia chuẩn hóa các giao diện này như Mozilla, Apple, Microsoft, Google, Adobe, v.v. Tuy nhiên, chính W3C mới chính thức hóa một tiêu chuẩn và xuất bản nó – xem tại đây (https://dom.spec.whatwg.org/).

Hướng dẫn này nhằm mục đích trình bày các khái niệm cơ bản về cấu trúc tài liệu HTML và cách thao tác nó bằng cách sử dụng JavaKịch bản. Chúng tôi sẽ đề cập đến các chủ đề sau trong hướng dẫn này:

Hiểu cấu trúc DOM
Các thành phần của DOM trong Selenium
Gỡ lỗi trong DOM
Sự kiện DOM
Khắc phục sự cố trong DOM

Hiểu cấu trúc DOM

Bạn sẽ cần hiểu cấu trúc DOM nếu bạn đang xây dựng bất kỳ trang web nào liên quan đến việc tạo tập lệnh bằng cách sử dụng JavaScript. Việc hiểu DOM thậm chí còn quan trọng hơn nếu bạn đang thực hiện bất kỳ một hoặc tất cả các tác vụ phức tạp sau đây trên trang web của mình –

Phát triển nội dung tự cập nhật liên tục mà không cần làm mới toàn bộ trang – như giá hiện tại của tất cả các cổ phiếu trong danh mục đầu tư của người dùng của bạn
Phát triển các tương tác nâng cao của người dùng như thêm hoặc sửa đổi nội dung một cách linh hoạt – như khả năng thêm nhiều cổ phiếu hơn vào danh mục đầu tư của bạn
Phát triển nội dung mà người dùng có thể tùy chỉnh - như khả năng thay đổi bố cục để danh mục quỹ tương hỗ xuất hiện trước danh mục cổ phiếu
Phát triển nội dung phản hồi trên trang web của bạn, do đó làm cho trang web của bạn tự động thích ứng với các màn hình phương tiện khác nhau như iPhone, máy tính để bàn, máy tính bảng, v.v.

Một trang HTML cơ bản

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
         <head>
            <title>my page title</title>
          </head>
<body>
         <article>
                  <p>
                         my first article
                   </p>
         </article>
        <aside>side bar content</aside>
</body>
</html>

DOM PARSER của trình duyệt trông như thế nào?

html    >     head    >    title
    >    body    >    aside
            >    article    >    p

Làm thế nào để bạn truy cập phần tử cơ thể?

<script>
    var body = window.document.body;
</script>

Bạn nói “Xin chào thế giới” như thế nào?

<script>
    var body = document.querySelector("body > article > p").innerHTML = "Hello World!";
			</script>

Cuối cùng toàn bộ file HTML sẽ trông như thế nào

Mở Windows Notepad và dán nội dung sau vào đó. Sau đó lưu tệp dưới dạng “MyFileNewFile.html” (đảm bảo tên tệp của bạn kết thúc bằng .html).

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<title>my page title</title>
</head>
<body>
<article><p>my first article</p></article>
<aside>side bar content</aside>
<script>

    var body = document.querySelector("body > article > p").innerHTML = "Hello World!";
			</script>
</body>
</html>

Cuối cùng, chỉ cần mở tệp bằng bất kỳ trình duyệt ưa thích nào của bạn và bạn sẽ thấy “Xin chào thế giới!”

Các thành phần của DOM trong Selenium

Dưới đây là các thành phần chính của DOM được Selenium Trình điều khiển Web:

Cửa sổ
Tài liệu
Yếu tố

Cửa sổ

Cửa sổ là đối tượng chứa đối tượng tài liệu trong DOM. Nó nằm trên tất cả mọi thứ.

Để truy cập đối tượng cửa sổ từ một tài liệu nhất định

<script>
      var window = document.defaultView;
</script>

Trong môi trường theo thẻ, mỗi tab có đối tượng cửa sổ riêng. Tuy nhiên, nếu một người muốn nắm bắt và triển khai các sự kiện như window.resizeTo và window.resizeBy thì chúng sẽ áp dụng cho toàn bộ cửa sổ chứ không chỉ cho tab.

Thuộc tính của đối tượng cửa sổ trong DOM

window.localStorage – cấp quyền truy cập vào bộ nhớ cục bộ của trình duyệt. Bộ nhớ cục bộ có thể được sử dụng để lưu trữ và truy xuất dữ liệu từ một phiên.

<script>
    window.localStorage.setItem('name','xyz');
	var name = window.localStorage.getItem('name');
</script>

window.opener – lấy tham chiếu đến đối tượng window đã mở cửa sổ này (bằng cách nhấp vào liên kết hoặc sử dụng phương thức window.open)

Các phương thức hữu ích của đối tượng Window

window.alert() – hiển thị hộp thoại cảnh báo kèm theo tin nhắn.

<script>
		window.alert('say hello');
</script>

Có nhiều sự kiện hữu ích mà đối tượng window hiển thị. Chúng ta sẽ thảo luận về chúng trong phần “Sự kiện” trong Chủ đề nâng cao

Tài liệu

Tài liệu đánh dấu sự bắt đầu của cây DOM. Tài liệu là nút đầu tiên trong DOM. Nó có một số phương thức và thuộc tính, có phạm vi áp dụng cho toàn bộ tài liệu như URL, getElementById, querySelector, v.v.

Thuộc tính của đối tượng tài liệu trong DOM

Document.documentURI và Tài liệu.URL – Cả hai đều trả về vị trí hiện tại của tài liệu. Tuy nhiên, nếu tài liệu không thuộc loại thì Tài liệu HTML.URL sẽ không hoạt động.

Document.activeElement – Phương pháp này trả về phần tử trong DOM đang được focus. Điều này có nghĩa là nếu người dùng đang nhập vào hộp văn bản, Document.activeElement sẽ trả về tham chiếu đến hộp văn bản đó.

Tiêu đề tài liệu – Cái này được sử dụng để đọc hoặc đặt tiêu đề của một tài liệu nhất định.

Các phương thức hữu ích của đối tượng tài liệu

Document.getElementById(Chuỗi id) – đây là phương pháp hữu ích và phù hợp nhất trong thao tác DOM. Nó được sử dụng để tra cứu một phần tử trong cây DOM bằng cách sử dụng định danh duy nhất của nó. Tra cứu phân biệt chữ hoa chữ thường, ví dụ như trong ví dụ sau, “ ” phần tử không thể được tra cứu bằng các từ như IntroDiv hoặc introdiv hoặc iNtrodiv, v.v.

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head></head>
<body>
<div id='introDiv'></div>
<script>
		var label = Document.getElementById('introDiv');
		label.setInnerHTML('say hello again');
	</script>
</body>
</html>

Document.querySelectorAll(Bộ chọn chuỗi) – đây là một phương pháp được sử dụng rộng rãi khác để chọn thêm một phần tử dựa trên các quy tắc của bộ chọn CSS (nếu bạn quen với ký hiệu $ của jQuery thì chính nó cũng sử dụng phương thức này). Chúng tôi sẽ không đi sâu vào bộ chọn CSS nhiều. Bộ chọn CSS là tập hợp các quy tắc mà theo đó bạn có thể nhận được danh sách các phần tử tương tự (dựa trên quy tắc bộ chọn). Chúng tôi đã sử dụng phương pháp này trước đây trong phần “Xin chào thế giới”.

Yếu tố

Phần tử là bất kỳ đối tượng nào được đại diện bởi một nút trong cây DOM của tài liệu. Như mọi khi, bản thân đối tượng Element chỉ là một hợp đồng các thuộc tính, phương thức và sự kiện giữa trình duyệt và tài liệu HTML. Có các loại Phần tử đặc biệt như HTMLElement, SVGElement, XULElement, v.v. Chúng tôi sẽ chỉ tập trung vào HTMLElement trong hướng dẫn này.

Thuộc tính của đối tượng phần tử trong DOM

Phần tử.id – Thuộc tính này có thể được sử dụng để đặt hoặc đọc “ID” (mã định danh duy nhất) cho một thành phần HTML. ID phải là duy nhất trong số các thành phần trong cây DOM. Như đã đề cập trước đó, ID cũng được phương thức Document.getElementById sử dụng để chọn một đối tượng Element cụ thể trong cây DOM.

HTMLElement.contentCó thể chỉnh sửa – Thuộc tính contentEditable của một phần tử xác định xem nội dung của phần tử đó có thể chỉnh sửa/sửa đổi được hay không. Thuộc tính này có thể được thiết lập như trong tập lệnh bên dưới. Thuộc tính này cũng có thể được sử dụng để xác định xem một phần tử nhất định có thể chỉnh sửa được hay không. Hãy thử tập lệnh sau bên trong bất kỳ phần thân HTML nào và bạn sẽ thấy rằng bạn có thể chỉnh sửa bất kỳ nội dung nào của phần thân.

<script>
		document.body.contentEditable = true;
</script>

Element.innerHTML – innerHTML là một thuộc tính quan trọng khác mà chúng ta sử dụng để truy cập nội dung HTML bên trong một phần tử. Nó cũng được sử dụng để thiết lập nội dung HTML mới của phần tử. Nó được sử dụng rộng rãi để thiết lập/thay đổi nội dung của các trường dữ liệu. Ví dụ, bạn muốn trang web của mình cập nhật nhiệt độ của Thành phố Mumbai mỗi giờ, bạn có thể chạy tập lệnh trong ví dụ sau mỗi giờ.

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<title>my page title</title>
</head>
<body>
<section>
<h1>Mumbai</h1>
<h2>Temperature</h2>
<span id='tempValue'></span><sup>o</sup>C
</section>
<script>
    document.getElementById('tempValue').innerHTML = '26';
			</script>
</body>
</html>

Các phương thức hữu ích của đối tượng phần tử

HTMLElement.blur() & HTMLElement.focus() – Phương pháp blur và focus được sử dụng để loại bỏ focus khỏi hoặc cung cấp focus cho một phần tử HTML. Các phương pháp này được sử dụng rộng rãi nhất để di chuyển focus của con trỏ giữa các hộp văn bản trong trang web nhập dữ liệu.

Element.querySelectorAll – Phương thức này tương tự như phương thức querySelector đã được thảo luận cho đối tượng tài liệu. Tuy nhiên, phương pháp này sẽ giới hạn việc tìm kiếm của nó trong phần tử con của chính phần tử đó.

Gỡ lỗi trong DOM

Công cụ phát triển của Google Chrome, Mozila Firefox, Internet Explorer (10 trở lên) hoặc Safari cho phép gỡ lỗi dễ dàng ngay bên trong trình duyệt. Đôi khi các trình duyệt khác nhau diễn giải cùng một đánh dấu HTML một cách khác nhau và đó là khi việc gỡ lỗi giúp bạn kiểm tra DOM như đã được công cụ DOM của trình duyệt cụ thể đó diễn giải.

Bây giờ, giả sử bạn muốn thay đổi giá trị nhiệt độ từ 26^oC để 32^oC trong ví dụ cuối cùng của bạn. Chúng tôi sẽ thực hiện vài bước đơn giản để làm điều đó. Ảnh chụp màn hình hiển thị ở đây là của Mozilla Firefox– tuy nhiên, các bước đều giống nhau ở tất cả các trình duyệt khác.

Mở MyFileNewFile.html (hoặc bất kỳ tên nào bạn đặt cho tệp HTML trong phần hướng dẫn ở trên) bằng trình duyệt của bạn
Dùng chuột click chuột phải vào giá trị nhiệt độ 26^oC và nhấp vào “Kiểm tra phần tử”
Lưu ý rằng phần tử mà bạn chọn “Kiểm tra phần tử” được đánh dấu trong trình duyệt của bạn (cửa sổ trình gỡ lỗi thường xuất hiện ở cuối màn hình)
Mở phần tử bằng cách nhấp vào hình tam giác nghiêng bên cạnh nó
Chọn những gì bạn muốn chỉnh sửa và nhấp đúp vào đó. Bạn sẽ có tùy chọn để thay đổi văn bản. Thực hiện theo hướng dẫn trong hình ảnh động bên dưới.
Lưu ý sự thay đổi về nội dung trang HTML của bạn. Bạn có thể đóng cửa sổ gỡ lỗi ngay bây giờ.

Lưu ý rằng những thay đổi của bạn sẽ chỉ được duy trì trong phiên này. Ngay sau khi bạn tải lại hoặc làm mới (nhấn F5), trang thay đổi sẽ được hoàn nguyên. Điều này cho thấy bạn không thay đổi nguồn HTML thực tế mà chỉ thay đổi cách diễn giải cục bộ của trình duyệt.

Để thực hiện một bài tập vui vẻ, hãy thử làm như sau. Mở www.facebook.com trong trình duyệt của bạn và sử dụng công cụ gỡ lỗi để có được kết quả sau – hãy chú ý cách nó hiển thị “Tôi đã hack được Facebook”.

Quá trình gỡ lỗi trong DOM

Sự kiện DOM

Sự kiện trong DOM là gì?

Sự kiện là một mô hình lập trình trong đó các sự cố do người dùng kích hoạt (hoặc vòng đời của trang trình duyệt được kích hoạt) được phát dưới dạng tin nhắn. Ví dụ: khi một trang tải xong, nó sẽ kích hoạt sự kiện window.load và tương tự khi người dùng nhấp vào nút sự kiện nhấp chuột của phần tử được kích hoạt.

Những tin nhắn này có thể bị chặn bởi bất kỳ JavaScript mã và sau đó có thể thực hiện hành động do nhà phát triển xác định. Ví dụ, bạn muốn các con số trên trang web của mình chỉ cập nhật khi người dùng nhấp vào nút. Bạn có thể thực hiện bằng bất kỳ phương pháp nào sau đây –

Gán hành động cho sự kiện onclick của phần tử HTML
Gán hành động cho sự kiện nhấp chuột bằng phương thức addEventListener

Phương pháp 1

<!DOCTYPE html>
<html>
<head>
    <title>my page title</title>
</head>
<body>
    <section>
        <h1>Mumbai<h1>
        <h2>Temperature</h2>
        <span id='tempValue'></span><sup>o</sup>C
        <br/>
        <br/>
        <button onclick='onRefreshClick()'>Refresh</button>
    </section>
<script>
    	document.getElementById('tempValue').innerHTML = '26';

 function onRefreshClick(e) {
   document.getElementById('tempValue').innerHTML = '32';
}
			</script>
</body>
</html>

Phương pháp 2

<!DOCTYPE html>
<html>
<head>
    <title>my page title</title>
</head>
<body>
    <section>
        <h1>Mumbai<h1>
        <h2>Temperature</h2>
        <span id='tempValue'></span><sup>o</sup>C
        <br/>
        <br/>
        <button id='btnRefresh'>Refresh</button>
    </section>
<script>
    document.getElementById('tempValue').innerHTML = '26';
    document.getElementById('btnRefresh').addEventListener('click', function(event) {
    document.getElementById('tempValue').innerHTML = '32' },false);
			</script>
</body>
</html>

Khắc phục sự cố trong DOM

Q. Làm cách nào để biết một phần tử có tồn tại hay không?

A. Hãy thử tra cứu phần tử bằng bất kỳ bộ chọn nào và kiểm tra xem phần tử được trả về có phải là null hay không. Xem ví dụ bên dưới –

if(document.getElementById("elementIDWhichIsNotPresentInDOM") === null)
{
    //do something
}

H. Tôi nhận được TypeError: document.getElementByID không phải là một hàm…

A. Đảm bảo rằng tên phương thức khớp chính xác với phương thức API. Giống như trong câu hỏi trên – đó là getElementById chứ không phải getElementByID.

Câu hỏi: Sự khác biệt giữa các nút con và nút con là gì?

A. Phương thức children cung cấp cho chúng ta bộ sưu tập tất cả các phần tử trong phần tử gọi. Bộ sưu tập được trả về có kiểu HTMLCollection. Tuy nhiên, phương thức childNodes cung cấp cho chúng ta bộ sưu tập tất cả các nút trong phần tử gọi. Thêm các tập lệnh sau vào ví dụ của chúng ta và xem sự khác biệt –

Phương thức childNodes trả về 14 mục

document.write("Using childNodes method")
document.write("<br>");
document.write("<br>");
for(i=0;i<document.getElementsByTagName("section")[0].childNodes.length;i++)
{
    document.write((i+1)+".");
    document.write(document.getElementsByTagName("section")[0].childNodes[i].toString());
    document.write("<br>");
}
document.write("<br>");
document.write("Number of nodes in a section " + document.getElementsByTagName("section")[0].childNodes.length);

Trong khi phương thức con chỉ trả về 7 mục

document.write("Using children method")
document.write("<br>");
document.write("<br>");
for(i=0;i<document.getElementsByTagName("section")[0].children.length;i++)
{
    document.write((i+1)+".");
    document.write(document.getElementsByTagName("section")[0].children[i].toString());
    document.write("<br>");
}
document.write("<br>");
document.write("Number of nodes in a section " + document.getElementsByTagName("section")[0].children.length);

H. Tôi nhận được lỗi Uncaught TypeError: Không thể đọc thuộc tính 'innerHTML' của không xác định…

A. Đảm bảo rằng trường hợp của HTMLElement mà bạn đang gọi thuộc tính innerHTML đã được thiết lập sau khi khai báo ban đầu. Lỗi này thường xảy ra trong trường hợp sau. Xem cách tránh lỗi trong khối mã tiếp theo…

var element;
if(false) //say condition was false
{
    element = document.getElementById('tempValue1');
}
element.innerHTML = '32';

var element = null;
if(false) //say condition was false
{
    element = document.getElementById('tempValue1');
}
if(element != null)
{
    element.innerHTML = '32';
}

Tổng kết

Trong hướng dẫn này, chúng ta đã tìm hiểu DOM là gì và khái niệm cần thiết cần hiểu để xây dựng các trang web động.
Chúng tôi cũng đã đề cập đến các loại phần tử DOM như Cửa sổ, Tài liệu và Phần tử.
Chúng tôi đã tìm hiểu một số phương thức và thuộc tính DOM hữu ích có sẵn trong mỗi loại.
Chúng tôi đã thấy cách hầu hết các trình duyệt cung cấp công cụ dành cho nhà phát triển để chơi với bất kỳ trang web nào có sẵn trên Internet - từ đó học cách gỡ lỗi và giải quyết các vấn đề với trang web của chính chúng tôi.
Chúng tôi cũng đã đề cập ngắn gọn về cơ chế Sự kiện DOM.
Cuối cùng, chúng tôi đã đề cập đến một số mục khắc phục sự cố trong DOM.
Internet chứa đầy tài nguyên trên DOM. Một trong những tài liệu tham khảo tốt nhất và cập nhật nhất hiện có tại mạng lưới nhà phát triển của Mozilla. Nhìn thấy - https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model