Upgrade to Pro — share decks privately, control downloads, hide ads and more …

karmaを使ったSPA向けE2Eテスト技法

kyo_ago
February 27, 2017

 karmaを使ったSPA向けE2Eテスト技法

kyo_ago

February 27, 2017
Tweet

More Decks by kyo_ago

Other Decks in Programming

Transcript

  1. let webdriver = require('selenium-webdriver');
 
 let driver = new webdriver.Builder()


    .forBrowser('chrome')
 .build();
 
 driver.executeScript('return 2').then((res) => {
 console.log('returned ', res);
 });
 
 driver.get('https://www.google.co.jp/').then(() => {
 driver.quit();
 }); LBSNBΛ࢖ͬͨ41"޲͚ͷ&&ςετٕ๏ ͚ͩ͜͜#SPXTFSDPOUFYU
  2. OPEFJOEFYKT UIFOBCMF8FC%SJWFS1SPYZ\ qPX@ $POUSPM'MPX\ QSPQBHBUF6OIBOEMFE3FKFDUJPOT@USVF  BDUJWF2VFVF@ 5BTL2VFVF\ OBNF@5BTL2VFVF 

    qPX@<$JSDVMBS>  UBTLT@<0CKFDU>  JOUFSSVQUT@OVMM  QFOEJOH@OVMM  TVC2@OVMM LBSNBΛ࢖ͬͨ41"޲͚ͷ&&ςετٕ๏ ͜Ε͕ਏ͍ʂ
  3. var webdriver = require('selenium-webdriver'),
 By = webdriver.By,
 until = webdriver.until;


    
 var driver = new webdriver.Builder()
 .forBrowser('firefox')
 .build();
 driver.get('http://www.google.com/');
 driver.findElement(By.name(‘q')).sendKeys('webdriver');
 driver.findElement(By.name('btnG')).click();
 driver.wait(until.titleIs('webdriver - Google Search'), 1000);
 driver.quit(); LBSNBΛ࢖ͬͨ41"޲͚ͷ&&ςετٕ๏ ଴ͬͯ͘ΕΔ
  4. describe('Assert', () => {
 it('should true', () => {
 expect(true).toEqual(true);


    });
 }); LBSNBΛ࢖ͬͨ41"޲͚ͷ&&ςετٕ๏ ͜Ε͕ϒϥ΢β্Ͱಈ͘
  5. <!DOCTYPE html>
 <html lang="ja">
 <head>
 <script src="context.js"></script>
 <script type="text/javascript">
 %CLIENT_CONFIG%


    window.__karma__.setupContext(window);
 %MAPPINGS%
 </script>
 %SCRIPTS%
 <title>Inside Frontend</title>
 </head>
 <body>
 <script type="text/javascript">
 window.__karma__.loaded();
 </script>
 </body>
 </html> LBSNBΛ࢖ͬͨ41"޲͚ͷ&&ςετٕ๏ ͜͜ʹLBSNBDPOGKTͷ'JMF͕ల։͞ΕΔ ͔͜͜Β࣮ߦΛ։࢝
  6. describe('Document title', () => {
 it('should be', () => {


    expect(document.title).toEqual('Inside Frontend');
 });
 }); LBSNBΛ࢖ͬͨ41"޲͚ͷ&&ςετٕ๏
  7. customContextFile: "custom-context-file.html",
 proxyValidateSSL: false,
 client: { clearContext: false },
 middleware:

    ['proxy'],
 proxy: {
 '/inside-frontend/': {
 'target': 'http://inside-frontend.com/',
 'changeOrigin': true
 }
 }, proxyReq: (proxyReq, req, res, options) => {
 },
 proxyRes: (proxyRes) => {
 }, LBSNBΛ࢖ͬͨ41"޲͚ͷ&&ςετٕ๏ LBSNBDPOGKT 44-1SPYZ࣌ͷূ໌ॻΤϥʔΛແࢹ ςετ࣮ߦ͝ͱʹ؀ڥΛΫϦΞ͠ͳ͍ LBSNBQSPYZQMVHJO࢖༻ LBSNBඪ४ͷQSPYJFTͰͳ͍͜ͱʹ஫ҙ ૹ৴Πϕϯτ ड৴Πϕϯτ
  8. XMLHttpRequest = () => {/* … */};
 fetch = ()

    => {/* … */}; LBSNBΛ࢖ͬͨ41"޲͚ͷ&&ςετٕ๏ DVTUPNDPOUFYUpMFIUNM
  9. proxyRes: (proxyRes) => {
 if (proxyRes.headers['set-cookie']) {
 proxyRes.headers['set-cookie'] = proxyRes.headers['set-cookie'].map((cookie)

    => {
 // karma಺͸httpͳͷͰsecureΛফ͢
 return cookie.replace(/\s*secure;?/i, '');
 })
 }
 }, LBSNBΛ࢖ͬͨ41"޲͚ͷ&&ςετٕ๏ LBSNBDPOGKT
  10. proxyRes: (proxyRes) => {
 if (proxyRes.headers['location']) {
 // ϦμΠϨΫτઌΛมߋ
 proxyRes.headers['location']

    = proxyRes.headers['location'].replace(/^https:\/\/ example.com/i, '/example/');
 }
 }, LBSNBΛ࢖ͬͨ41"޲͚ͷ&&ςετٕ๏ LBSNBDPOGKT
  11. fetch('/example/login', {
 method: 'POST',
 body: new FormData(document.getElementById('#login'))
 }).then((response) => response.text()).then((text)

    => {
 // ϨεϙϯεʹToken͕͋Ε͹ม਺ʹอଘ
 // Cookie͸อ࣋͞ΕΔ
 window.__karma__.loaded();
 }); LBSNBΛ࢖ͬͨ41"޲͚ͷ&&ςετٕ๏ DVTUPNDPOUFYUpMFIUNM
  12. LBSNBΛ࢖ͬͨ41"޲͚ͷ&&ςετٕ๏ const assert = require("power-assert");
 
 describe('index page', () =>

    {
 it('Google map', () => {
 assert(google.maps);
 });
 it('copyright', () => {
 assert(document.querySelector('.copyright'));
 });
 });