เริ่มต้นเขียน E2E Testing ด้วย Protractor (part 2)

kasidesh
Kasidesh
Published in
1 min readJan 14, 2017

ต่อจาก part 1 พอเตรียมเครื่องให้พร้อมแล้ว ก็มาทำความรู้จักกับ locator ก่อนเลย

locator คือสิ่งที่เราไว้ใช้ติดต่อกับ element ต่างๆ บนหน้าเว็บนั้นเอง

โดย protractor เปิดให้เขียนติดต่อไปยัง element ด้วย element ตรงๆ เลยเช่น

element(by.id('lst-ib')).sendKeys('google');
element(by.css('.gsfi input')).sendKeys('yahoo');
element(by.css('input[type="submit"]')).click();

จาก part 1 ให้กลับไปแก้ไขไฟล์ spec.js เป็นโค้ดนี้เพื่อทดสอบกันดู

describe('Google Demo App', function() {
it('should found search ', function() {
//เนื่องจาก www.google.com ไม่ได้เขียนด้วย AngularJS เลยต้องตั้งค่า ignoreSynchronization เป็น true (ฉะนั้นถ้าเป็น false คือ page นั้นเขียนด้วย AngularJS นั้นเอง)
browser.ignoreSynchronization=true;
browser.get('https://www.google.com');
element(by.id('lst-ib')).sendKeys('google');
element(by.css('input[type="submit"]')).click();
});
});

ตัว Protractor เป็น E2E testing framework ที่ออกแบบมาเพื่อใช้กับ AngularJS โดยเฉพาะ ทำให้สามารถเข้าถึง element ผ่าน model, binding ได้เลย เช่น

element(by.model('first')).sendKeys(1);
element(by.model('second')).sendKeys(2);
element(by.binding('latest')).getText();

มี locator อะไรให้ใช้งานบ้าง

//main locator
element(by.id('first'));
element(by.css('.first'));
element(by.xpath('//*[@id="lst-ib"]'));
element(by.name('first'));
//direct element locator
element(by.tagName('h2'));
element(by.linkText('first'));
element(by.buttonText('first'));
element(by.partialButtonText('first'));
element(by.className('first'));
//angular locator
element(by.model('user.firstname'));//ng-model directive
element(by.binding('user.lastname'));//ng-bind director
element(by.repeater('user.favorites'));
element(by.options(''c c in colors'));

ใน part 3 จะอธิบายเกี่ยวกับ before, after สำหรับการ configuration และ ทดสอบ spec คับ

--

--