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

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

By.xpath("//span[contains(@aria-label, 'Create (c)')]"),
		)
		await btnCreate.click()

		let pageTextVerify = By.visibleText('Create issue')
		await browser.wait(Until.elementIsVisible(pageTextVerify))

		await browser.takeScreenshot()

		//#issuetype-field = BUG
		let selIssueType = await browser.findElement(
			By.xpath("//input[contains(@id, 'issuetype-field')]"),
		)
		await selIssueType.focus()

		await browser.type(By.css('#issuetype-field'), 'Bug')
		await browser.press(Key.ENTER)

		//#summary
		await browser.type(By.css('#summary'), 'There is a bug in the application')

		//#description
		await browser.type(
			By.css('#description'),
			'There is a bug in the application and this is the description',
		)

		//#priority-field
		await browser.type(By.css('#priority-field'), 'Low')
		await browser.press(Key.ENTER)

		//#labels-textarea

let pageTextVerify = By.visibleText('Create issue')
		await browser.wait(Until.elementIsVisible(pageTextVerify))

		await browser.takeScreenshot()

		//#issuetype-field = BUG
		let selIssueType = await browser.findElement(
			By.xpath("//input[contains(@id, 'issuetype-field')]"),
		)
		await selIssueType.focus()

		await browser.type(By.css('#issuetype-field'), 'Bug')
		await browser.press(Key.ENTER)

		//#summary
		await browser.type(By.css('#summary'), 'There is a bug in the application')

		//#description
		await browser.type(
			By.css('#description'),
			'There is a bug in the application and this is the description',
		)

		//#priority-field
		await browser.type(By.css('#priority-field'), 'Low')
		await browser.press(Key.ENTER)

		//#labels-textarea
		await browser.type(By.css('#labels-textarea'), 'bug-report')
		await browser.press(Key.ENTER)
		await browser.type(By.css('#labels-textarea'), 'defect')
		await browser.press(Key.ENTER)

step('The Flood Store: Proceed to Checkout', async browser => {
		let lnkProceedToCheckout = By.css('#post-14 > div > div > div > div > div > a')
		await browser.wait(Until.elementIsVisible(lnkProceedToCheckout))
		let element = await browser.findElement(lnkProceedToCheckout)
		await element.focus()
		await element.click()

		let pageTextVerify = By.visibleText('Returning customer?')
		await browser.wait(Until.elementIsVisible(pageTextVerify))
	})

step('S/4 Hana Login', async browser => {

    	//Validate text
    	let loginValidation = By.visibleText('Log On')
        await browser.wait(Until.elementIsVisible(loginValidation))

        //enter username
        await browser.type(By.css('#j_username'), "j.rizio@tricentis.com")

        //enter password
        await browser.type(By.css('#j_password'), "YvnXh39rpjEF")

        let signin = await browser.findElement(By.css('#logOnFormSubmit'))
        await signin.click()        

    	//Validate text
    	let dashValidation = By.visibleText('Trial Center')
        await browser.wait(Until.elementIsVisible(dashValidation))          
        
        await browser.takeScreenshot()

    })

step('1. Start', async browser => {
		await browser.visit('https://challenge.flood.io', { waitUntil: 'networkidle2' })

		let startButton = By.css('#new_challenger > input.btn')
		await browser.wait(Until.elementIsVisible(startButton))
		let el = await browser.findElement(startButton)
		await el.focus()
		await browser.takeScreenshot()
		await el.click()
	})

step('Shopping Cart Demo App: Add Item to Cart', async browser => {
    
    //Click on the Add to Cart
    let obj_btn_Item = By.css('#__button4-container-cart---welcomeView--promotedRow-0-img')
    await browser.wait(Until.elementIsVisible(obj_btn_Item))
    let element1 = await browser.findElement(obj_btn_Item)
    await element1.click() 

    //View your cart by clicking on the 'Shopping Trolley' icon in the top right hand corner
    let obj_btn_ViewCart = By.css('#__button3-img')
    await browser.wait(Until.elementIsVisible(obj_btn_ViewCart))
    let element2 = await browser.findElement(obj_btn_ViewCart)
    await element2.click()  

    //Verify that we have added the item successfully by checking that 'Save for Later' text is shown on the page
    const pageTextVerify2 = By.visibleText("Save for Later")
    await browser.wait(Until.elementIsVisible(pageTextVerify2))

    //Take a screenshot
    await browser.takeScreenshot()

await selIssueType.focus()

		await browser.type(By.css('#issuetype-field'), 'Bug')
		await browser.press(Key.ENTER)

		//#summary
		await browser.type(By.css('#summary'), 'There is a bug in the application')

		//#description
		await browser.type(
			By.css('#description'),
			'There is a bug in the application and this is the description',
		)

		//#priority-field
		await browser.type(By.css('#priority-field'), 'Low')
		await browser.press(Key.ENTER)

		//#labels-textarea
		await browser.type(By.css('#labels-textarea'), 'bug-report')
		await browser.press(Key.ENTER)
		await browser.type(By.css('#labels-textarea'), 'defect')
		await browser.press(Key.ENTER)

		//#environment
		await browser.type(By.css('#environment'), 'Production')
	})

await browser.type(By.css('#summary'), 'There is a bug in the application')

		//#description
		await browser.type(
			By.css('#description'),
			'There is a bug in the application and this is the description',
		)

		//#priority-field
		await browser.type(By.css('#priority-field'), 'Low')
		await browser.press(Key.ENTER)

		//#labels-textarea
		await browser.type(By.css('#labels-textarea'), 'bug-report')
		await browser.press(Key.ENTER)
		await browser.type(By.css('#labels-textarea'), 'defect')
		await browser.press(Key.ENTER)

		//#environment
		await browser.type(By.css('#environment'), 'Production')
	})