Laravel and Cypress integration

基本上是看 laracasts - cypress and laravel integration 的筆記。

cypress 安裝步驟

step 1. 安裝

npm install cypress --save-dev

step 2. 寫測試

安裝好後會產生 cypress.json 檔和 cypress 資料夾

啟動你的 app，並在 cypress.json 設定入口網站

{
    "baseUrl": "http://laravel7_starter.test"
}

在 integration\examples 裡寫一個不通過的測試

it('works', () => {
    expect(2+2).to.equal(5);
});

step 3. 跑測試

開啟 GUI，點剛剛寫的 example_spec.js

npx cypress open

Laravel + Cypress Integration

https://github.com/laracasts/cypress

安裝

php artisan cypress-boilerplate

設定測試環境（安裝這個 package 會自動備份當前環境，並使用 env.cypress 作為測試環境）

DB_CONNECTION=mysql
DB_DATABASE=cypress

https://github.com/guiyomh/cypress-boilerplate

基本操作

語法

describe('a feature', () => {
    describe('a portion', () => {
        it('perform', () => {
        }); 
    });
});

describe('a portion', () => {
});

context('a portion', () => {
});

sqlite 環境

.env DB 改成 sqlite

DB_CONNECTION=sqlite
DB_DATABASE=/Users/本地某個資料夾/database.sqlite

database/database.sqlite
新增一個 database.sqlite，執行 php artisan migrate，指定 --env=cypress

php artisan migrate --env=cypress

Exercise

describe('Blog', () => {
    it('show all posts', () => {
        cy.create('App\\Post', {
            title: 'My First Post'
        });
       cy.visit('/blog').contains('My First Post');
    }); 

    it('create a post', () => {
    }); 
});

foreach

describe('Blog', () => {
    beforeach( () => {
        cy.log('hello world');
    });
});

laravel-commands

cy.refreshdatabase() 刷新 db 指令

describe('Blog', () => {
    beforeach( () => {
        cy.refreshdatabase();
    });
});

failOnSatusCode: false 顯示錯誤

cy.visit('/blog',{
    failOnSatusCode: false
}).contains('My First Post');

cy.php() php 語法

cy.php(`App\\Post::count()`).then( count => { cy.log('post count: + count')});

參考

• [Cypress 1] E2E Testing 初探
• cypress - Writing Your First Test
• https://example.cypress.io/