컨디션

실시된 일

테스트 대상 화면

<template>
  <div>
    <section>
      <input type="text" name="inputData" v-model="inputData" placeholder="please enter some test!" />
    </section>
    <section>
      <input type="button" value="send" @click="send" />
    </section>
    <section>
      <input type="text" name="resultData" :value="result" />
    </section>
  </div>
</template>

<script>
  export default {
    name: 'testTarget',
    data () {
      return {
        inputData: '',
        result: 'before'
      }
    },
    methods: {
      send: function () {
        this.result = this.inputData
      }
    }
  }
</script>

<style scoped>

</style>

테스트 코드

module.exports = {
  'input test': function (browser) {
    const targetPage = browser.page.testTargetPage()

    targetPage.navigate()
      .assert.visible('@inputData')
      .setValue('@inputData', 'test')
      .send()
      .assert.value('@resultData', 'test')

    browser.end()
  } 
}

const pageCommands = {
    send: function () {
        return this.waitForElementVisible('@sendButton', 1000)
            .click('@sendButton') 
    }
}

module.exports = {
    commands: [pageCommands],
    url: function () {
        return this.api.globals.devServerURL
    },
    elements: {
        inputData: {
            selector: 'input[name=inputData]'
        },
        sendButton: {
            selector: 'input[type=button]'
        },
        resultData: {
            selector: 'input[name=resultData]'
        }
    }
}

require('babel-register')
var config = require('../../config')

module.exports = {
  src_folders: ['test/e2e/specs'],
  output_folder: 'test/e2e/reports',
  custom_assertions_path: ['test/e2e/custom-assertions'],
  page_objects_path: ['test/e2e/pageObjects'],

  selenium: {
    start_process: true,
    server_path: require('selenium-server').path,
    host: '127.0.0.1',
    port: 4444,
    cli_args: {
      'webdriver.chrome.driver': require('chromedriver').path
    }
  },

  test_settings: {
    default: {
      selenium_port: 4444,
      selenium_host: 'localhost',
      silent: true,
      globals: {
        devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port)
      }
    },

    chrome: {
      desiredCapabilities: {
        browserName: 'chrome',
        javascriptEnabled: true,
        acceptSslCerts: true
      }
    },

    firefox: {
      desiredCapabilities: {
        browserName: 'firefox',
        javascriptEnabled: true,
        acceptSslCerts: true
      }
    }
  }
}

디렉토리 구조

project_root
    |- src
        |- page
            |- TestTarget.vue
    |- test
        |- e2e
            |- pageObjects
                |- testTargetPage.js
            |- specs
                |- test.js
            |- nightwatch.conf.js

푹 빠진 곳

결실

참고할게요.