Selenium – Browser Interactions (Part 2)

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/