How to use the @flood/element.By.id function in @flood/element

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')

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('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()
	})

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'))

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')

step('Flood Challenge: Step 4', async (browser: Driver) => {
		await browser.wait(Until.elementTextMatches('span.token', /\d+/))
		let element = await browser.findElement('span.token')
		let token = await element.text()
		await browser.type(By.id('challenger_one_time_token'), token)

		await browser.takeScreenshot()
		await browser.click('input.btn')
	})