How to use @flood/element - 10 common examples

step('The Flood Store: Checkout Data Entry', async browser => {
		//let billingFirstName = await browser.findElement(By.id('billing_first_name'))

		// Fill in text field - billing First Name
		await browser.type(By.id('billing_first_name'), 'Jason')

		// Fill in text field - billing First Name
		await browser.type(By.id('billing_last_name'), 'Rizioz')

		// Select from searchable dropdown - billing Country
		await browser.selectByValue(By.id('billing_country'), 'Australia')

		// Fill in text field - billing Address 1
		await browser.type(By.id('billing_address_1'), '123 ABC Street')

		// Fill in text field - billing City
		await browser.type(By.id('billing_city'), 'Melbourne')

		// Select from searchable dropdown - billing State
		let element_state = await browser.findElement(By.id('billing_state'))
		await browser.selectByValue(element_state, 'Victoria')

		// Fill in text field - billing postcode
		await browser.type(By.id('billing_postcode'), '3000')

step('The Flood Store: Checkout Data Entry', async browser => {
		//let billingFirstName = await browser.findElement(By.id('billing_first_name'))

		// Fill in text field - billing First Name
		await browser.type(By.id('billing_first_name'), 'Jason')

		// Fill in text field - billing First Name
		await browser.type(By.id('billing_last_name'), 'Rizioz')

		// Select from searchable dropdown - billing Country
		await browser.selectByValue(By.id('billing_country'), 'Australia')

		// Fill in text field - billing Address 1
		await browser.type(By.id('billing_address_1'), '123 ABC Street')

		// Fill in text field - billing City
		await browser.type(By.id('billing_city'), 'Melbourne')

		// Select from searchable dropdown - billing State
		let element_state = await browser.findElement(By.id('billing_state'))
		await browser.selectByValue(element_state, 'Victoria')

		// Fill in text field - billing postcode
		await browser.type(By.id('billing_postcode'), '3000')

		// Fill in text field - billing phone
		await browser.type(By.id('billing_phone'), '0400000123')

		// Fill in text field - billing email
		await browser.type(By.id('billing_email'), 'jason@flood.io')

const page = browser.page

    let obj_txt_SayHello = By.css('#__input0-inner')
    await browser.wait(Until.elementIsVisible(obj_txt_SayHello))
    await page.focus( '#__input0-inner' );
    await page.keyboard.press( 'End' );    
    page.type('#__input0-inner', ' Flood Element 123', {delay: 200}); // Types slower, like a user 

    let obj_lbl_CustomText = By.xpath("//div[contains(text(),'World Flood Element 123')]")
    await browser.wait(Until.elementIsVisible(obj_lbl_CustomText))    

    await browser.takeScreenshot()
  })

  step('Walkthrough Demo App: Select Invoice Item', async browser => {

    let obj_span_milk = By.xpath("//span[contains(text(),'Canned Beans')]")
    await browser.wait(Until.elementIsVisible(obj_span_milk))
    let element1 = await browser.findElement(obj_span_milk)
    await element1.click() 

    //Please rate this product
    const pageTextVerify = By.visibleText('Please rate this product')
    await browser.wait(Until.elementIsVisible(pageTextVerify))  

    await browser.takeScreenshot()
  })

step('Flood Challenge: Step 1', async (browser: Driver) => {
		// await browser['waitForNavigationComplete']()
		await browser.wait(Until.elementIsVisible(By.id('challenger_age')))

		await browser.selectByValue(By.id('challenger_age'), '28')
		let select = await browser.findElement(By.id('challenger_age'))
		await select.takeScreenshot()

		await browser.click(By.css('input.btn'))
	})

step('Flood Challenge: Step 2', async (browser: Driver) => {
		await browser.wait(Until.elementIsVisible('table tbody tr td:first-of-type label'))
		let orderElements = await browser.findElements(By.css('table tbody tr td:first-of-type label'))

		assert(orderElements.length > 0, 'expected to find orders on this page')

		let orderIDs = await Promise.all(orderElements.map(element => element.text()))

		// Find largest number by sorting and picking the first item
		let largestOrder = orderIDs
			.map(Number)
			.sort((a, b) => a - b)
			.reverse()[0]

		// Fill in text field
		await browser.type(By.id('challenger_largest_order'), String(largestOrder))

		// Click label with order ID
		await browser.click(By.visibleText(String(largestOrder)))

		await browser.click(By.css('input.btn'))
	})

step('2. Age', { waitTimeout: 60 }, async browser => {
		// let button = By.css('input.btn')
		// await browser.wait(Until.elementIsVisible(button))

		// let buttonElement = await browser.findElement(button)
		// await buttonElement.click()

		let select = By.id('challenger_age')
		await browser.wait(Until.elementIsVisible(select))
		await browser.selectByValue(select, '42')

		await browser.takeScreenshot()
	})

step('JIRA: Username Sign-in', async browser => {
		// Fill in text field - billing First Name
		await browser.type(By.css('#username'), 'j.rizio@tricentis.com')

		let btnContinue = await browser.findElement(By.css('#login-submit > span > span'))
		await btnContinue.click()

		await browser.takeScreenshot()
	})

step('The Flood Store: Checkout Data Entry', async browser => {
		//let billingFirstName = await browser.findElement(By.id('billing_first_name'))

		// Fill in text field - billing First Name
		await browser.type(By.id('billing_first_name'), 'Jason')

		// Fill in text field - billing First Name
		await browser.type(By.id('billing_last_name'), 'Rizioz')

		// Select from searchable dropdown - billing Country
		let element = await browser.findElement(By.id('billing_country'))
		await element.focus()
		await element.click()
		await browser.type(By.xpath('/html/body/span/span/span[1]/input'), 'Australia')
		await browser.type(By.xpath('/html/body/span/span/span[1]/input'), String.fromCharCode(13)) //Simulate Enter key

		// Fill in text field - billing Address 1
		await browser.type(By.id('billing_address_1'), '123 ABC Street')

		// Fill in text field - billing City
		await browser.type(By.id('billing_city'), 'Melbourne')

		// Select from searchable dropdown - billing State
		let element_state = await browser.findElement(By.id('billing_state'))
		await element_state.focus()
		await element_state.click()
		await browser.type(By.xpath('/html/body/span/span/span[1]/input'), 'Victoria')

// Fill in text field - billing City
		await browser.type(By.id('billing_city'), 'Melbourne')

		// Select from searchable dropdown - billing State
		let element_state = await browser.findElement(By.id('billing_state'))
		await element_state.focus()
		await element_state.click()
		await browser.type(By.xpath('/html/body/span/span/span[1]/input'), 'Victoria')
		await browser.type(By.xpath('/html/body/span/span/span[1]/input'), String.fromCharCode(13)) //Simulate Enter key

		// Fill in text field - billing postcode
		await browser.type(By.id('billing_postcode'), '3000')

		// Fill in text field - billing phone
		await browser.type(By.id('billing_phone'), '0400000123')

		// Fill in text field - billing email
		await browser.type(By.id('billing_email'), 'jason@flood.io')

		await browser.takeScreenshot()
	})

// Fill in text field - billing Address 1
		await browser.type(By.id('billing_address_1'), '123 ABC Street')

		// Fill in text field - billing City
		await browser.type(By.id('billing_city'), 'Melbourne')

		// Select from searchable dropdown - billing State
		let element_state = await browser.findElement(By.id('billing_state'))
		await element_state.focus()
		await element_state.click()
		await browser.type(By.xpath('/html/body/span/span/span[1]/input'), 'Victoria')
		await browser.type(By.xpath('/html/body/span/span/span[1]/input'), String.fromCharCode(13)) //Simulate Enter key

		// Fill in text field - billing postcode
		await browser.type(By.id('billing_postcode'), '3000')

		// Fill in text field - billing phone
		await browser.type(By.id('billing_phone'), '0400000123')

		// Fill in text field - billing email
		await browser.type(By.id('billing_email'), 'jason@flood.io')

		await browser.takeScreenshot()
	})