Phần 1 mình đã giới thiệu về Browser navigation, JavaScript alerts, prompts and confirmations. Trong phần 2 này mình sẽ giới tiếp các items: working with cookies, IFrames and frames.
Working with cookies
Cookie là một phần dữ liệu nhỏ được gửi từ một trang web và được lưu trữ trong máy tính của bạn. Cookie chủ yếu được sử dụng để nhận dạng người dùng và tải thông tin được lưu trữ.
API WebDriver cung cấp cách tương tác với cookie bằng các phương thức tích hợp sẵn:
Add Cookie
Method này được sử dụng để thêm một cookie vào browser context hiện tại. Add cookie chỉ chấp nhận một set JSON object đã được defined. Đây là danh sách các Key values được chấp nhận.
Trước hết, bạn cần phải ở trên domain có cookie hợp lệ. Nếu bạn đang cố gắng set cookie trước khi bắt đầu tương tác với một trang web và trang chủ của bạn lớn / mất một lúc để tải, giải pháp thay thế là tìm một trang nhỏ hơn trên trang web (thường là trang 404 nhỏ, ví dụ: http://example .com/some404page)
it('Create a cookie', async function() {
await driver.get('https://www.selenium.dev/selenium/web/blank.html');
// set a cookie on the current domain
await driver.manage().addCookie({ name: 'key', value: 'value' });Get Named Cookie
Method này trả về cookie data một cách tuần tự matching với cookie name trong số tất cả các cookies được liên kết.
it('Read cookie', async function() {
await driver.get('https://www.selenium.dev/selenium/web/blank.html');
// set a cookie on the current domain
await driver.manage().addCookie({ name: 'foo', value: 'bar' });
// Get cookie details with named cookie 'foo'
await driver.manage().getCookie('foo').then(function(cookie) {
console.log('cookie details => ', cookie);
});Get All Cookies
Nếu browser không còn available thì sẽ trả về error
it('Read all cookies', async function() {
await driver.get('https://www.selenium.dev/selenium/web/blank.html');
// Add few cookies
await driver.manage().addCookie({ name: 'test1', value: 'cookie1' });
await driver.manage().addCookie({ name: 'test2', value: 'cookie2' });
// Get all Available cookies
await driver.manage().getCookies().then(function(cookies) {
console.log('cookie details => ', cookies);
});Delete Cookie
Method này sẽ xoá hết cookie data đang matching với cookie name
it('Delete a cookie', async function() {
await driver.get('https://www.selenium.dev/selenium/web/blank.html');
// Add few cookies
await driver.manage().addCookie({ name: 'test1', value: 'cookie1' });
await driver.manage().addCookie({ name: 'test2', value: 'cookie2' });
// Delete a cookie with name 'test1'
await driver.manage().deleteCookie('test1');
// Get all Available cookies
await driver.manage().getCookies().then(function(cookies) {
console.log('cookie details => ', cookies);
});Delete All Cookies
Method này sẽ xoá hết các cookies của browser hiện tại
it('Delete all cookies', async function() {
await driver.get('https://www.selenium.dev/selenium/web/blank.html');
// Add few cookies
await driver.manage().addCookie({ name: 'test1', value: 'cookie1' });
await driver.manage().addCookie({ name: 'test2', value: 'cookie2' });
// Delete all cookies
await driver.manage().deleteAllCookies();Same-Site Cookie Attribute
Nó cho phép người dùng hướng dẫn browser kiểm soát xem cookie có được gửi cùng với yêu cầu do các trang web của bên thứ ba khởi tạo hay không. Nó còn ngăn chặn các cuộc tấn côngIt is introduced CSRF (Cross-Site Request Forgery)
Same-Site cookie chấp nhận 2 parameters .
Strict:
Khi sameSite attribute được set là Strict, cookie sẽ không được gửi cùng với request của bên thứ ba.
Lax:
Khi sameSite attribute được set là Lax, cookie sẽ đựơc gửi cùng GET request từ bên thứ ba.
it('Create cookies with sameSite', async function() {
await driver.get('https://www.selenium.dev/selenium/web/blank.html');
// set a cookie on the current domain with sameSite 'Strict' (or) 'Lax'
await driver.manage().addCookie({ name: 'key', value: 'value', sameSite: 'Strict' });
await driver.manage().addCookie({ name: 'key', value: 'value', sameSite: 'Lax' });Working with IFrames and frames
Frames hiện không được dùng để xây dựng bố cục trang web từ nhiều tài liệu trên cùng một miền nữa. Bạn khó có thể làm việc với frames trừ khi bạn đang làm việc với ứng dụng web HTML5 trước đó. Iframes cho phép chèn tài liệu từ một miền hoàn toàn khác và vẫn được sử dụng phổ biến.
Nếu bạn cần làm việc với frames hoặc iframes, WebDriver cho phép bạn làm việc với chúng theo cách tương tự. Ví dụ, một button trong iframe sẽ như sau:
<div id="modal">
<iframe id="buttonframe" name="myframe" src="https://seleniumhq.github.io">
<button>Click here</button>
</iframe>
</div>Nếu như nó không nằm trong iframe thì chúng ta có thể click button bằng câu lệnh:
// This won't work
await driver.findElement(By.css('button')).click();Tuy nhiên, nếu buttons nằm trong iframe thì lệnh trên sẽ trả về kết quả “no such element“. Để tương tác với button, chúng ta cần chuyển sang frame, tương tự như cách chúng ta chuyển window. WebDriver đưa ra 3 cách để switch sang một frame.
Using a WebElement
// Store the web element
const iframe = driver.findElement(By.css('#modal > iframe'));
// Switch to the frame
await driver.switchTo().frame(iframe);
// Now we can click the button
await driver.findElement(By.css('button')).click();
Using a name or ID
Nếu như frame hoặc iframe của bạn có attribute ID hoặc name, thì chúng ta có thể sử dụng nó để switch. Nếu name hoặc ID không unique trên page, thì nó sẽ nhận giá trị đầu tiên được tìm thấy sẽ để thực hiện action.
// Using the ID
await driver.switchTo().frame('buttonframe');
// Or using the name instead
await driver.switchTo().frame('myframe');
// Now we can click the button
await driver.findElement(By.css('button')).click();Using an index
// Switches to the second frame
await driver.switchTo().frame(1);Leaving a frame
Để thoát khỏi một frame hoặc frameset, switch lại về nội dung mặc định:
// Return to the top level
await driver.switchTo().defaultContent();Tham khảo: https://www.selenium.dev/documentation/webdriver/interactions/frames/
One Reply to “Selenium – Browser Interactions (Part 2)”