imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix E2E.

Browse Source
This commit is contained in:
chiayin
2023-06-17 13:52:42 +08:00
parent af1f8f3016
commit a6fa85938b
5 changed files with 19 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

310
cypress/fixtures/filterFunnel.cy.js Normal file
View File

@@ -0,0 +1,310 @@
// 每一 describe 就是一個測試套件
// 每一 it 就是一個測試命令
describe('Save Log and Filter', ()=>{
beforeEach(() => {
cy.visit('https://REDACTED-HOST/files');
cy.login();
cy.visit('https://REDACTED-HOST/files');
// enter log
cy.url().should('include', 'files');
cy.contains('.fileName', 'random').dblclick(); // 選取 'random' log 檔
cy.contains('h2', 'DISCOVER'); // 斷言在 Discover 頁
cy.url().should('include', 'discover/map/log'); // 斷言在 discover/map/log/:id 路徑
cy.wait(3000)
cy.get('#iconFilter').click(); // 選取 Filter sidebar
});
it('Sequence, Have activity(s).', () => {
// select radio
cy.get('input#Sequence0').should('be.checked'); // 選取 Radio 'Sequence'
cy.contains('label', 'Have activity(s)') // 選取 Radio 'Have activity(s)'
.prev(2)
.find('input')
.should('have.attr', 'type', 'radio') // select the previous element
.should('be.checked'); // confirm it's type radio (optional)
// No selected.
cy.contains('button', 'Apply').click();
cy.get('.v-toast__text').should('contain', 'Not selected');
cy.wait(3000);
// Clear selected item.
cy.get('.allCheckboxAct') // 選取 all select
.find('input')
.should('not.be.visible').check({ force: true}).should('be.checked'); // 打開隱藏項目並選取
cy.contains('button', 'Clear').click();
cy.get('.allCheckboxAct') // 選取 all select
.find('input')
.should('not.be.visible')
.should('not.be.checked')
cy.wait(3000);
// selected item
cy.get('table tr:nth-child(2) input[type="checkbox"]').check({force: true});
cy.contains('button', 'Apply').click();
cy.get('#tabFunnel').click();
cy.contains('p', 'Sequence');
cy.contains('span', 'Include');
cy.contains('button', 'Apply All').click();
// make sure create map again.
cy.get('header').click();
cy.get('#iconState').click();
cy.get('li').first().then($li => { // then() 獲取 <li> 元素的內容
const percentage = $li.find('span').eq(1).text(); // li 底下找到第二個 span
expect(percentage).not.to.equal('100%'); // text !== 100% 來判斷數據是否有變化
});
});
it('Sequence, Start', () => {
// select radio
cy.get('input#Sequence0').should('be.checked'); // 選取 Radio 'Sequence'
cy.contains('label', 'Start activity / End activity') // 選取 Radio 'Have activity(s)'
.prev(2)
.find('input')
.should('have.attr', 'type', 'radio') // select the previous element
.check({ force: true })
.should('be.checked'); // confirm it's type radio (optional)
// No selected.
cy.contains('button', 'Apply').click();
cy.get('.v-toast__text').should('contain', 'Not selected');
cy.wait(3000);
// Clear selected item.
cy.get('table tr:nth-child(2) input[type="radio"]').check({force: true}); // 選取第二個
cy.contains('button', 'Clear').click();
cy.get('table tr:nth-child(2) input[type="radio"]').should('not.be.checked')
cy.wait(3000);
// selected item
cy.get('table tr:nth-child(2) input[type="radio"]').check({force: true});
cy.contains('button', 'Apply').click();
cy.get('#tabFunnel').click();
cy.contains('p', 'Sequence');
cy.contains('span', 'Start');
cy.contains('button', 'Apply All').click();
//make sure create map again.
cy.get('header').click();
cy.get('#iconState').click();
cy.get('li').first().then($li => { // then() 獲取 <li> 元素的內容
const percentage = $li.find('span').eq(1).text(); // li 底下找到第二個 span
expect(percentage).not.to.equal('100%'); // text !== 100% 來判斷數據是否有變化
});
});
it('Sequence, End', () => {
// select radio
cy.get('input#Sequence0').should('be.checked'); // 選取 Radio 'Sequence'
cy.contains('label', 'Start activity / End activity') // 選取 Radio 'Have activity(s)'
.prev(2)
.find('input')
.should('have.attr', 'type', 'radio') // select the previous element
.check({ force: true })
.should('be.checked'); // confirm it's type radio (optional)
cy.get('input#End1').check({ force: true });
// No selected.
cy.contains('button', 'Apply').click();
cy.get('.v-toast__text').should('contain', 'Not selected');
cy.wait(3000);
// Clear selected item.
cy.get('table tr:nth-child(1) input[type="radio"]').check({force: true}); // 選取第一個
cy.contains('button', 'Clear').click();
cy.get('table tr:nth-child(1) input[type="radio"]').should('not.be.checked')
cy.wait(3000);
// selected item
cy.get('table tr:nth-child(2) input[type="radio"]').check({force: true});
cy.contains('button', 'Apply').click();
cy.get('#tabFunnel').click();
cy.contains('p', 'Sequence');
cy.contains('span', 'End');
cy.contains('button', 'Apply All').click();
// make sure create map again.
cy.get('header').click();
cy.get('#iconState').click();
cy.get('li').first().then($li => { // then() 獲取 <li> 元素的內容
const percentage = $li.find('span').eq(1).text(); // li 底下找到第二個 span
expect(percentage).not.to.equal('100%'); // text !== 100% 來判斷數據是否有變化
});
});
it('Sequence, Start & End', () => {
// select radio
cy.get('input#Sequence0').should('be.checked'); // 選取 Radio 'Sequence'
cy.contains('label', 'Start activity / End activity') // 選取 Radio 'Have activity(s)'
.prev(2)
.find('input')
.should('have.attr', 'type', 'radio') // select the previous element
.check({ force: true })
.should('be.checked'); // confirm it's type radio (optional)
cy.get('input[id="Start & End2"]').check({ force: true });
// No selected.
cy.contains('button', 'Apply').click();
cy.get('.v-toast__text').should('contain', 'Both Start and End must be selected');
cy.wait(3000);
// 選取 "start" 的 <table>
cy.contains('p', 'Start activity')
.parents('div') // 回到 p 的父層 div
.eq(1) // 同階層的第二個 div
.find('table') // 向下找 table
.as('startTable'); // 將選取的元素命名，使用 @startTable 來操作
// 選取 "end" 的 <table>
cy.contains('p', 'End activity')
.parents('div')
.eq(1)
.find('table')
.as('endTable'); // 使用 @endTable 來操作
// Clear selected item.
cy.get('@startTable').find('tr:nth-child(1) input[type="radio"]').check({ force: true });
cy.get('@endTable').find('tr:nth-child(1) input[type="radio"]').check({ force: true });
cy.contains('button', 'Clear').click();
cy.get('@startTable').find('tr:nth-child(1) input[type="radio"]').should('not.be.checked');
cy.get('@endTable').find('tr:nth-child(1) input[type="radio"]').should('not.be.checked');
cy.wait(3000);
// selected item
cy.get('@startTable').find('tr:nth-child(1) input[type="radio"]').check({ force: true });
cy.get('@endTable').find('tr:nth-child(1) input[type="radio"]').check({ force: true });
cy.contains('button', 'Apply').click();
cy.get('#tabFunnel').click();
cy.contains('p', 'Sequence');
cy.contains('span', 'Start')
.parent()
.contains('span', 'End'); // 斷言 text 是否包含 Start 和 End.
cy.contains('button', 'Apply All').click();
// make sure create map again.
cy.get('header').click();
cy.get('#iconState').click();
cy.get('li').first().then($li => { // then() 獲取 <li> 元素的內容
const percentage = $li.find('span').eq(1).text(); // li 底下找到第二個 span
expect(percentage).not.to.equal('100%'); // text !== 100% 來判斷數據是否有變化
});
});
it('Sequence, Sequence', () => {
// select radio
cy.get('input#Sequence0').should('be.checked'); // 選取 Radio 'Sequence'
cy.contains('p', 'Activity Sequence') // 選取包含指定文字的元素
.nextAll() // 選取所有後續相鄰元素
.eq(2) // 選取索引為 2 , 下 3 個相鄰元素
.find('input#Sequence2') // 在下一個相鄰元素中尋找指定的 <input> 元素
.check({ force: true }); // 對該 <input> 元素進行勾選操作
// No selected.
cy.contains('button', 'Apply').click();
cy.get('.v-toast__text').should('contain', 'Select two or more');
cy.wait(3000);
// 使用 dblclick 選擇要拖曳的元素
cy.get('tbody tr[data-draggable="true"]').first().dblclick();
cy.get('.listSequence').find('div[data-draggable="true"]').should('exist');
cy.contains('button', 'Clear').click();
cy.get('.listSequence').find('div[data-draggable="true"]').should('not.exist');
cy.get('.v-toast__text').should('contain', 'Reset Success');
cy.wait(3000);
// 設定傳給後端的 listSequence
cy.get('tbody tr[data-draggable="true"]').eq(0).dblclick(); // 第 1 個 tr
cy.get('tbody tr[data-draggable="true"]').eq(1).dblclick(); // 第 2 個 tr
cy.contains('button', 'Apply').click();
cy.get('#tabFunnel').click();
cy.contains('p', 'Sequence');
cy.contains('span', 'Directly-follows');
cy.contains('button', 'Apply All').click();
// make sure create map again.
cy.get('header').click();
cy.get('#iconState').click();
cy.get('li').first().then($li => { // then() 獲取 <li> 元素的內容
const percentage = $li.find('span').eq(1).text(); // li 底下找到第二個 span
expect(percentage).not.to.equal('100%'); // text !== 100% 來判斷數據是否有變化
});
});
it('Trace', () => {
// select radio
cy.get('input#Trace2').check({ force: true }); // 選取 Radio 'Trace'
cy.wait(3000);
// click on Trace Number to show a table
cy.contains('td', '#1').click();
cy.wait(1000);
cy.get('#cyTrace').scrollIntoView().should('be.visible'); // 視窗滾到右邊
cy.wait(1000);
cy.get('.p-chart').scrollIntoView(); // 視窗拉回來
// Clear selected item
cy.get('.p-slider-handle:nth-child(2)')
.click()
.trigger('mousedown', { which: 1 })
.trigger('mousemove', { clientX: 250 })
.xpath('//span[contains(@class, "p-slider-handle")][2]')
.click()
.trigger('mouseup');
cy.contains('button', 'Clear').click();
cy.get('.v-toast__text').should('contain', 'Reset Success');
cy.wait(3000);
// selected item
cy.get('.p-slider-handle:nth-child(2)')
.click()
.trigger('mousedown', { which: 1 })
.trigger('mousemove', { clientX: 250 })
.xpath('//span[contains(@class, "p-slider-handle")][2]')
.click()
.trigger('mouseup');
cy.contains('button', 'Apply').click();
cy.get('#tabFunnel').click();
cy.contains('p', 'Trace');
cy.contains('button', 'Apply All').click();
// make sure create map again.
cy.get('header').click();
cy.get('#iconState').click();
cy.get('li').first().then($li => { // then() 獲取 <li> 元素的內容
const percentage = $li.find('span').eq(1).text(); // li 底下找到第二個 span
expect(percentage).not.to.equal('100%'); // text !== 100% 來判斷數據是否有變化
});
});
it('Timeframes', () => {
// select radio
cy.get('input#Timeframes3').check({ force: true }); // 選取 Radio 'Trace'
cy.wait(3000);
// Clear selected item
cy.get('#startCalendar').click();
cy.get('.p-datepicker td[aria-label="28"]').click({ multiple: true });
cy.contains('button', 'Clear').click();
cy.get('.v-toast__text').should('contain', 'Reset Success');
cy.wait(3000);
// selected item
cy.get('#startCalendar').click();
cy.get('.p-datepicker td[aria-label="28"]').click({ multiple: true });
cy.contains('button', 'Apply').click();
cy.get('#tabFunnel').click();
cy.contains('p', 'Timeframe');
cy.contains('button', 'Apply All').click();
// make sure create map again.
cy.get('header').click();
cy.get('#iconState').click();
cy.get('li').first().then($li => { // then() 獲取 <li> 元素的內容
const percentage = $li.find('span').eq(1).text(); // li 底下找到第二個 span
expect(percentage).not.to.equal('100%'); // text !== 100% 來判斷數據是否有變化
});
});
});

44
cypress/fixtures/loginToLogout.cy.js Normal file
View File

@@ -0,0 +1,44 @@
// 之後要優化: 每一個測試步驟要分開寫，不寫在同一個 it 裡面、將測試寫成 report 輸出成 html(嘗試)、功能模組化
const baseUrl = Cypress.env('baseUrl');
describe("Login to Logout", () => {
before(() => {
cy.visit(baseUrl); // 測試可否進入網站
cy.contains("h2", "LOGIN"); // 是否轉址到 /login 並顯示畫面
cy.url().should('include', 'login') // url path 要有 'Login'，確定進入 login page
})
it("test login success and error", () => {
// 驗證帳密是否刪除前後空白、錯誤帳密是否顯示驗證、Button display
cy.fixture('users/id-not-exists').then(({username, password}) => {
cy.get('.btn-lg').should('be.disabled');
cy.get('#account').should('have.focus').type(username);
cy.get('.btn-lg').should('be.disabled');
cy.get('#password').type(password);
cy.get('.btn-lg').click();
cy.get('#account').should('have.value', 'test');
cy.get('#password').should('have.value', 'test');
cy.get('form').submit();
cy.contains("p", "Incorrect account or password.");
cy.url().should('include', 'login');
});
// 正確帳密登入
cy.get('#account').clear().type(` ${Cypress.env('user').username} `);
cy.get('#password').clear().type(` ${Cypress.env('user').password} `);
cy.get('.btn-lg').click();
cy.get('#account').should('have.value', Cypress.env('user').username);
cy.get('#password').should('have.value', Cypress.env('user').password);
cy.get('form').submit(); // 選取 form 表單並發送
// 轉址到 files 頁
cy.url().should('include', 'files');
cy.get('a #iconMember').scrollIntoView().click();
// 轉址到會員頁
cy.url().should('include', 'member-area');
// 登出
cy.get('.btn-sm').contains('log out').click();
});
});