Cucumber fixes (#478)

* Lib updates

* Update cucumber demo

* Cleanup after merge

* Fix work on updating cucumber demo

* Final fixes before test updates

* Update wido libs and fix tests

* Update tests

* bump wdio packages

* Update demo/wdio.cucumber.conf.ts

Co-authored-by: Christian Bromann <git@bromann.dev>

* PR comments

---------

Co-authored-by: Christian Bromann <git@bromann.dev>

.eslintignore

@@ -1,2 +1,3 @@
 _results_/**/*.js
 config/**/*.js
+dist/**/*

demo/cucumber-scenarios/features/UserInteractionsFail.feature

@@ -2,17 +2,17 @@ Feature: User interactions - Failure
 
   Background:
     Given I navigate to base url
-    And I close close ad-popups
 
-  Scenario: I should be able to edit sliders (failure at the last step)
-    Given I open Advanced Examples tab
-    And I open 'drag-drop-range' demo
-    When I click first slider
-    Then Slider range should be '30'
-
-  Scenario: I should be able to edit sliders (failure at an earlier step)
-    Given I open Advanced Examples tab
-    And I open 'drag-drop-range' demo
-    When I click first slider
-    Then Slider range should be '30'
+  Scenario: I should be able edit text, then select a dropdown option (failure at the last step)
+    Given I open inputs page
+    And I enter message '1634343434'
     And I navigate to base url
+    And I open dropdown page
+    And I select dropdown option '2'
+    Then Dropdown value should be 'Options 1'
+
+  Scenario: I should be able to scroll a lot (failure at an earlier step)
+    Given I open scrolling page
+    And I scroll a lot
+    Then Paragraph count should be '1'
+    And I open inputs page

demo/cucumber-scenarios/features/UserInteractionsPass.feature

@@ -2,11 +2,8 @@ Feature: User interactions - Pass
 
   Background:
     Given I navigate to base url
-    And I close close ad-popups
 
   Scenario: I should be able to edit inputs (should pass)
-    Given I open Basic Examples tab
-    And I open 'basic-first-form' demo
-    When I enter message 'Presidenten'
-    And I click 'Show Message'
-    Then My message 'Presidenten' should be displayed
+    Given I open inputs page
+    When I enter message '46985576664848'
+    Then My message '46985576664848' should be displayed

demo/cucumber-scenarios/steps/UserInteractions.steps.ts

@@ -1,47 +1,63 @@
 import { Given, When, Then } from '@wdio/cucumber-framework'
-import { browser } from '@wdio/globals'
+import { browser, $, $$, expect } from '@wdio/globals'
 
-Given(/^I navigate to base url$/, async () => {
-  await browser.url('https://demo.seleniumeasy.com')
-})
+async function getHeader() {
+  return await $('h3').getElement()
+}
 
-Given(/^I close close ad-popups$/, async () => {
-  const lightbox = await $('#at-cv-lightbox-close')
-  await lightbox.waitForExist()
-  await $(lightbox).click().catch(() => {
-    // ignore
-  })
+Given('I navigate to base url', async () => {
+  await browser.url('https://the-internet.herokuapp.com/')
 })
 
-Given(/^I open Basic Examples tab$/, async () => {
-  await $('#btn_basic_example').click()
+Given(/^I open inputs page$/, async () => {
+  const inputLink = await $('a=Inputs').getElement()
+  await inputLink.click()
+  await (await getHeader()).waitForDisplayed()
 })
 
-Given(/^I open Advanced Examples tab$/, async () => {
-  await $('#advanced_example').click()
+Given(/^I open dropdown page$/, async () => {
+  const dropDownLink = await $('a=Dropdown').getElement()
+  await dropDownLink.click()
+  await (await getHeader()).waitForDisplayed()
 })
-
-When(/I open '(.+)' demo$/, async (demo) => {
-  await $(`.list-group-item[href*="${demo}"]`).click()
+Given(/^I open scrolling page$/, async () => {
+  const scrollLink = await $('a=Infinite Scroll').getElement()
+  await scrollLink.click()
+  await (await getHeader()).waitForDisplayed()
 })
-
 When(/I enter message '(.+)'$/, async (message) => {
-  await $('#get-input input').setValue(message)
+  const inputField = await $('input').getElement()
+  await inputField.setValue(message)
+  await browser.pause(1000)
+})
+
+When(/I select dropdown option '(.+)'$/, async (optionNumber) => {
+  const dropDown = await $('select#dropdown').getElement()
+  await dropDown.click()
+  const options = await $$('option').getElements()
+  await options[parseInt(optionNumber)].click()
 })
 
-When(/I click 'Show Message'$/, async () => {
-  await $('#get-input button').click()
-  await $('#get-input button').click()
+When('I scroll a lot', async () => {
+  for (let index = 0; index < 5; index++) {
+    const paragraphs = await $$('div.jscroll-added').getElements()
+    const lastParagraph = paragraphs[paragraphs.length - 1]
+    await lastParagraph.scrollIntoView(true)
+    await lastParagraph.click()
+    await browser.pause(1000)
+  }
 })
 
 Then(/My message '(.+)' should be displayed$/, async (message) => {
-  await expect($('#user-message #display')).toHaveText(message)
+  const inputField = await $('input').getElement()
+  await expect(inputField).toHaveValue(message)
 })
 
-When(/I click first slider$/, async () => {
-  await $('#slider1 input').click()
+Then(/Dropdown value should be '(.+)'$/, async (dropdownValue:string) => {
+  const dropDown = await $('select#dropdown').getElement()
+  await expect(dropDown).toHaveValue(dropdownValue)
 })
 
-Then(/Slider range should be '(.+)'$/, async (message) => {
-  await expect($('#slider1 #range')).toHaveText(message)
+Then(/Paragraph count should be '(.+)'$/, async (paragraphCount: number)=>{
+  await expect(await $$('div.jscroll-added').getElements()).toBeElementsArrayOfSize(paragraphCount)
 })

demo/wdio.conf.ts

@@ -34,7 +34,7 @@ export const config: WebdriverIO.Config = {
   // ============
   // Capabilities
   // ============
-  maxInstances: 1,
+  maxInstances: 2,
   capabilities: [
     {
       browserName: 'chrome',
@@ -51,7 +51,7 @@ export const config: WebdriverIO.Config = {
       browserName: 'firefox',
       acceptInsecureCerts: true,
       'moz:firefoxOptions': {
-        args: ['-headless', '--no-sandbox', '--disable-gpu']
+        args: ['--headless', '--no-sandbox', '--disable-gpu']
       }
     },
   ],

demo/wdio.cucumber.conf.ts

@@ -1,8 +1,11 @@
 import { config as baseConfig } from './wdio.conf.js'
 
+baseConfig.reporters?.push(['cucumberjs-json', {
+  jsonFolder: baseConfig.outputDir,
+  language: 'en',
+}])
 export const config: WebdriverIO.Config = {
   ...baseConfig,
-
   // =================
   // Cucumber settings
   // =================
@@ -24,5 +27,5 @@ export const config: WebdriverIO.Config = {
     strict: false,
     timeout: 60000,
     ignoreUndefinedDefinitions: false,
-  }
+  } as WebdriverIO.CucumberOpts
 }