help-test-tutorial-login

This is intended as video tutorial testing workflow walkthrough.

Agenda

  1. TLTR - Setup, Clone and Run.
  2. WTF - Navigate the Results.
  3. FLAMEON - Complain about something and fix it (suggested workflow).
  4. HACK - Tweak, break, hack and fix till your tired (cause it’s what we do).
  5. BDFL - Benevolent Dictator For Life or Force other to bend to your will through code, use, documentation and basically being the smartest person in the room (even if your Taed).

TLTR

Setup, Clone and Run it already….

catmini:Demo msops$ git clone https://github.com/ctrees/drpfeature.git
catmini:Demo msops$ cd drpfeature/
catmini:drpfeature msops$ yarn install
catmini:drpfeature msops$ yarn run test
catmini:drpfeature msops$ yarn run docs

WTF

OK… what just happened explained.

So that’s the run we are going to look at in detail now.

  1. Clone - $ git clone https://github.com/ctrees/drpfeature.git && cd drpfeature/
  2. Install - $ yarn install
  3. Test - $ yarn run test
  4. Document - $ yarn run docs

Full terminal output for your geek inspection:

catmini:Demo msops$ git clone https://github.com/ctrees/drpfeature.git
Cloning into 'drpfeature'...
remote: Counting objects: 147, done.
remote: Compressing objects: 100% (126/126), done.
remote: Total 147 (delta 21), reused 140 (delta 17), pack-reused 0
Receiving objects: 100% (147/147), 137.98 KiB | 2.76 MiB/s, done.
Resolving deltas: 100% (21/21), done.
catmini:Demo msops$ cd drpfeature/
catmini:drpfeature msops$ yarn install
yarn install v1.3.2
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > chai-webdriver@1.2.0" has incorrect peer dependency "chai@>= 1 < 4".
warning " > chai-webdriverio@0.4.3" has incorrect peer dependency "chai@~4.0.1".
warning " > babel-jest@22.0.4" has unmet peer dependency "babel-core@^6.0.0 || ^7.0.0-0".
[4/4] 📃  Building fresh packages...
✨  Done in 20.90s.
catmini:drpfeature msops$ yarn run test
yarn run v1.3.2
$ yarn run test:fcheck; yarn run test:po
$ yarn run wdio --spec ./src/features/githubSearch.feature
$ /Users/msops/Demo/drpfeature/node_modules/.bin/wdio --spec ./src/features/githubSearch.feature
------------------------------------------------------------------
[chrome #0-0] Session ID: 2f05b4650c4ebc047cc11102f40ce9de
[chrome #0-0] Spec: /Users/msops/Demo/drpfeature/src/features/githubSearch.feature
[chrome #0-0] Running: chrome
[chrome #0-0]
[chrome #0-0] Github test
[chrome #0-0]
[chrome #0-0]     open URL
[chrome #0-0]       ✓ I open the url "https://github.com/ctrees/drpfeature"
[chrome #0-0]       ✓ I expect that the url is "https://github.com/ctrees/drpfeature"
[chrome #0-0]       ✓ I expect that the title is "GitHub - ctrees/drpfeature: Digital Rebar Provision UX Feature Testing Automation"
[chrome #0-0]
[chrome #0-0]
[chrome #0-0] 3 passing (4s)
[chrome #0-0]

$ DEBUG=false yarn run wdio wdio.PageObjectTest.conf.js
$ /Users/msops/Demo/drpfeature/node_modules/.bin/wdio wdio.PageObjectTest.conf.js
------------------------------------------------------------------
[chrome #0-0] Session ID: f2b03e485ca7a87851b3a2094e9ffa87
[chrome #0-0] Spec: /Users/msops/Demo/drpfeature/src/pospecs/login.spec.js
[chrome #0-0] Running: chrome
[chrome #0-0]
[chrome #0-0] drp-ux auth form
[chrome #0-0]   ✓ should-deny-access-with-wrong-creds
[chrome #0-0]   ✓ should-allow-access-with-correct-creds
[chrome #0-0]
[chrome #0-0]
[chrome #0-0] 2 passing (14s)
[chrome #0-0]

✨  Done in 31.70s.
catmini:drpfeature msops$ yarn run docs
yarn run v1.3.2
$ cd docs && make html && cd ..
Running Sphinx v1.6.5
making output directory...
loading pickled environment... not yet created
building [mo]: targets for 0 po files that are out of date
building [html]: targets for 10 source files that are out of date
updating environment: 10 added, 0 changed, 0 removed
reading sources... [100%] pageobjects
looking for now-outdated files... none found
pickling environment... done
checking consistency... done
preparing documents... done
writing output... [100%] pageobjects
generating indices... genindex
writing additional pages... search
copying images... [ 50%] ../../screenshots/screen/should-allow-access-with-correct-creds_document_Chrome_v63copying images... [100%] ../../screenshots/screen/should-deny-access-with-wrong-creds_document_Chrome_v63_1024x768.png
copying static files... done
copying extra files... done
dumping search index in English (code: en) ... done
dumping object inventory... done
build succeeded.

Build finished. The HTML pages are in build/html.
✨  Done in 2.04s.
catmini:drpfeature msops$

AND we get screen shots of the test if you missed the flash of the browser working.

NOTE: THESE IMAGES ONLY SHOW if you build the docs locally.

  1. bdd-login-test-user_document_Chrome_v63_1024x768

    ../../screenshots/screen/bdd-login-test-user_document_Chrome_v63_1024x768.png

  2. bdd-login-unknown-user_document_Chrome_v63_1024x768

    ../../screenshots/screen/bdd-login-unknown-user_document_Chrome_v63_1024x768.png

FLAMEON

OK… now let’s add value as I like to say, or just Bchn… but it’s improving thing in my reality.

  1. Inspecting the test.
    1. Specfically I started with this git commit of login.spec.js and login.page.js (links are to commit pre-changes we make later).
    2. See Part 3
  2. Notice that test is not really checking anything other than a Screen Compare
    1. See Part 6
    2. See Part 7
  3. Well… HECK… I can HACK something better than this ;-)
    1. See Part 7
    2. See Part 8
  4. What next… HACK see below.

HACK

The fun part till you get frustrated with humans and pretty little tools too.

See Part 8.

BDFL

Becoming the Benevolent Dictator For Life seems fun, but takes lots of human and artificial minions _BUT_ it makes life easier when well trained.

See Part 9

login tutorial Vide0

  • Part 1 - TLTR
  1. Show http://drpfeature.readthedocs.io/en/latest/index.html
  2. Explain Read the Docs Index
  3. Show https://gihub.com/ctrees/drpfeature
  4. Clone the https://gihub.com/ctrees/drpfeature.git repo
  5. yarn install
  6. yarn run test (does 2 test a feature and a spec)
  7. yarn run docs
  8. open docs/build/html/index.html
  9. open docs/build/html/pageobject-login.html
  • Part 2 - WTF - Docs and Workflow
  1. Show new http://drpfeature.readthedocs.io/en/latest/help-test-tutorial-login.html
  2. Show local docs file:///Users/msops/Demo/drpfeature/docs/build/html/pageobject-login.html with screenshots
  3. Start to talk through login.page.js
  4. Talk about over-all Methods in http://drpfeature.readthedocs.io/en/latest/index.html
  5. Talk about Feature File aka cucumber aka gerkin http://drpfeature.readthedocs.io/en/latest/feature-githubSearch.html
  6. Talk about testing workflow
  7. Talk about testing results we got in terminal
  8. Talk about the 2 UX test levels Feature for Natural Language, Spec for CSS code mappings
  9. Talk about association of various maps to a common Domain Language
  • Part 3 - WTF / FLAMEON - Workflow and Debug
  1. Talk about CI regression
  2. Talk about Learning/Docs/Transfer Automation Tutorial ?
  3. Back to running tests “yarn run test” and watch again
  4. Talk about tools and bug problems I was running into
  5. FLAMEON - Find what I want to complain about
  6. Talk about pageobject-login http://drpfeature.readthedocs.io/en/latest/pageobject-login.html
  7. Talk about login.page.js
  8. Bitch about getting access to DOM
  9. Stop and pick up the debug session
  • Part 4 - WTF - Overview of project stuff
  1. Go back to http://drpfeature.readthedocs.io/en/latest/pageobject-login.html
  2. Go pull up login.page.js
  3. Get distracted and explain the project Tree
  4. Explain node_modules and yarn
  5. Explain sceenshots - testing reference screenshots
  6. Explain yarn.lock
  7. Explain wdio.PageObjectTest.conf.js
  8. Explain package.json
  9. Explain .gitignore, .eslintrc.yaml, .editorconfig, .babelrc
  • Part 5 - WTF - Files and Patterns
  1. Explain src directory… the source testing files
  2. feature, steps and support are for cucumber
  3. pageobject and pospecs are for mocha
  4. Explain pageobjects - page.js
  5. Explain page inheritance pattern
  6. Explain that I want to map all the lookup tables to a common domain language
  7. Examine pageobject/login.page.js
  8. Explain how login.page.js suck up objects AND define page selectors for unique objects
  9. woops… end of time
  • Part 6 - WTF / FLAMEON - source files, steps, testing tools
  1. Explain pospecs/login.spec.js
  2. explain chai asserts (which are missing right now)
  3. explain user test@horseoff.com (test account)
  4. Explain the test steps
  5. bitch about no css handles and expand…
  6. explain webdriver.io webdriver w3 spec selenium json-wire-protocal
  7. walk through the code more
  8. bitch and jump around…
  9. add “browser.debug()” and go away
  • Part 7 - FLAMEON / HACK - Discover DOM, Reactjs
  1. run “yarn run test:po”
  2. attempt to explain while it’s running… hit “browser.debug();”
  3. Show how I get into console and figure out a selector
  4. Show why reactjs give me fits as I browse the DOM
  5. Figure out the selector I should use “#header > div:nth-child(3) > div > div > div.text”
  6. Show that I do have that selector in login.page.js
  7. bitch about how reactjs can mess this up…
  8. put code in to test for asssert
  9. Run Test… woops… too late next time
  • Part 8 - HACK - Break, Debug, FIX and improve
  1. take browser.debug(); out so it does not stop
  2. run test “yarn test:po” woops I messed up (didn’t save)
  3. control-c and … wait it passes ?..
  4. run “yarn test:po” test again… talk about expectations
  5. go look at local docs file:///Users/msops/Code/drpfeature/docs/build/html/pageobject-login.html
  6. make it FAIL … so we can see it break
  7. run “yarn test:po” test again and yak about expections
  8. fails… and explain failure
  9. why didn’t we get screen fail… oh well…
  • Part 9 - HACK / BDFL - cleanup, make run, document for fame
  1. Part 9 ends this… even if I want to go on…
  2. fix what we broke…
  3. woops… test still broke… duh error validemail vs “validemail”
  4. Test PASS… do it again cause you know…
  5. Lets update a doc
  6. compile docs run “yarn docs”
  7. check update docs file:///Users/msops/Code/drpfeature/docs/build/html/pageobject-login.html
  8. yak about Pull Requests…
  9. talk about http://drpfeature.readthedocs.io/en/latest/help-test-tutorial-login.html

References

login.spec.js login.page.js