Cucumber revisited

• Review how the feature works
  • Some of the steps are my “error checking” steps.
• Selenium is a program that drives web browsers in general
  • It has bindings in many different languages https://www.selenium.dev/downloads/
  • Each web browser needs its own driver.
  • The Chromedriver is an npm package that can be used with the cucumber-js package.
• Look at setup.js
  • API and react must be launched outside of cucumber
    • (There are probably ways of automating this)
  • “magic” to get an object that can talk to the browser: let driver = new Builder().forBrowser('chrome').build()
  • Before block resets API to make tests consistent.
  • Look at When('I visit the root page')
  • Look at Then('I should see {int} colors'
    • Parameter
• Fundamental step in cucumber is finding node in the DOM, either to drive the DOM or to verify that the content is as expected.
• Locator: Many ways to locate an element:
  • https://www.selenium.dev/documentation/webdriver/elements/locators/
  • show syntax in different languages.
• Finding elements
  • https://www.selenium.dev/documentation/webdriver/elements/finders/
  • findElement (singular): Returns the first matching element.
    • Notice that this is asynchronous
  • findElements (plural): Returns all matching elements.
  • You can use multiple steps (as shown in the web page)
    • Or use css selector or XPATH
  • You can also search by content (e.g., the text that appears in the element)
    • findElements will return an empty list, findElement will raise an exception if it can’t find what it’s looking for.
    • So, one test strategy is to look for expected text and know that if it doesn’t appear the test will fail.
• XPATH: A very powerful way to identify an element in a DOM
• https://www.w3schools.com/xml/xpath_intro.asp
• / vs //: https://www.w3schools.com/xml/xpath_syntax.asp
  • //section in sample code

• So far, so good, but you can do this with css selectors. But, it gets better:

• Finding the specific edit button.
  • How do I know which edit button I want?
  • The only defining characteristic is the title (the h1 inside the section.)
  • Notice that the edit button is a “nephew” of the distinguishing h1.
  • We need to identify the correct section, then go get the edit button it contains.
  • Read the [] as “such that”:
    • Find a section such that it contains an h1 whose text is …
    • Outside the [] the expression continues with //button
    • The use of // means that the button doesn’t have to be a direct child of the section
• Code is very similar in Ruby:
  • /Users/kurmasz/Documents/Courses/Old/CS371/General/CS371_SampleCode/TestingDemo/features
  • However, regular expression syntax used more heavily.
• Capybara is a higher-level abstraction than Selenium
  • https://github.com/teamcapybara/capybara
  • ./CIS658/Code/TempBlog/features
• Challenge: Knowing how long to wait.