How to use the selenium-webdriver.By.id function in selenium-webdriver

async enterTestCreditCardDetails( {
		cardHolder,
		cardNumber,
		cardExpiry,
		cardCVV,
		cardCountryCode,
		cardPostCode,
	} ) {
		// This PR introduced an issue with older browsers, specifically IE11:
		//   https://github.com/Automattic/wp-calypso/pull/22239
		const pauseBetweenKeysMS = 1;

		await driverHelper.setWhenSettable( this.driver, By.id( 'name' ), cardHolder, {
			pauseBetweenKeysMS: pauseBetweenKeysMS,
		} );
		await driverHelper.setWhenSettable( this.driver, By.id( 'number' ), cardNumber, {
			pauseBetweenKeysMS: pauseBetweenKeysMS,
		} );
		await driverHelper.setWhenSettable( this.driver, By.id( 'expiration-date' ), cardExpiry, {
			pauseBetweenKeysMS: pauseBetweenKeysMS,
		} );
		await driverHelper.setWhenSettable( this.driver, By.id( 'cvv' ), cardCVV, {
			pauseBetweenKeysMS: pauseBetweenKeysMS,
		} );
		await driverHelper.clickWhenClickable(
			this.driver,
			By.css( `div.country select option[value="${ cardCountryCode }"]` )
		);
		return await driverHelper.setWhenSettable( this.driver, By.id( 'postal-code' ), cardPostCode, {
			pauseBetweenKeysMS: pauseBetweenKeysMS,
		} );
	}

it('Execute JavaScript', async () => {        
        try {
            await driver.get('http://formy-project.herokuapp.com/modal');
            
            let modalButton = await driver.findElement(By.id('modal-button'));
            modalButton.click();     

            // Use JavaScript to close the modal
            let closeButton = await driver.findElement(By.id('close-button'));
            driver.executeScript('arguments[0].click()', closeButton);  

            // assertion codes...

        } catch (error) {
            console.log(error);            
        }        
    });

it('Form', async () => {        
        try {
            await driver.get('http://formy-project.herokuapp.com/form');

            // await driver.sleep(3000); 

            await driver.findElement(By.id('first-name')).sendKeys('Dale');
            await driver.findElement(By.id('last-name')).sendKeys('Nguyen');
            await driver.findElement(By.id('job-title')).sendKeys('Application Developer');
            await driver.findElement(By.id('radio-button-2')).click();
            await driver.findElement(By.id('checkbox-1')).click();
            await driver.findElement(By.css("option[value='1']")).click();
            await driver.findElement(By.id('datepicker')).sendKeys('11/13/2018', Key.RETURN);

            // await driver.sleep(3000); 

            await driver.findElement(By.css('.btn.btn-lg.btn-primary')).click();                        
               
            // assertion codes...       
            let alertText = await driver.wait(until.elementLocated(By.className('alert')), 10000);
            assert.equal('The form was successfully submitted!!!', await alertText.getText());
                 
        } catch (error) {

const {By} = require('selenium-webdriver');
const {TestUtils} = require('kite-common');


const remoteVideo = 'remoteVideo';

// Elements of the page
const elements = {
  miniVideo: By.id('mini-video'),
  localVideo: By.id('local_video'),
  remoteVideo: By.id('remote-video'),
  muteAudioButton: By.id('mute-audio'),
  muteVideoButton: By.id('mute-video'),
  hangUpButton: By.id('hangup'),
  fullscreenButton: By.id('fullscreen')
}


module.exports = {

  // Click on the mute audio button
  muteAudio: async function(driver) {
    let muteAudioButton = await driver.findElement(elements.fullscreenButton.muteAudioButton);
    muteAudioButton.click();
  },

async enterStoreDetailsAndSubmit( {
		countryCode,
		stateCode,
		address,
		address2,
		city,
		postalCode,
		currency,
		productType,
		inPerson = false,
		helpWoo = false,
	} ) {
		const countryContainerSelector = By.id( 'select2-store_country-container' );
		const countrySelector = By.css( `li[id$="${ countryCode }"]` );
		const addressSelector = By.id( 'store_address' );
		const address2Selector = By.id( 'store_address_2' );
		const citySelector = By.id( 'store_city' );
		const stateContainerSelector = By.id( 'select2-store_state-container' );
		const stateSelector = By.css( `li[id$="${ stateCode }"]` );
		const postcodeSelector = By.id( 'store_postcode' );
		const currencyContainerSelector = By.id( 'select2-currency_code-container' );
		const currencySelector = By.css( `li[id$="${ currency }"]` );
		const productTypeContainerSelector = By.id( 'select2-product_type-container' );
		const productTypeSelector = By.css( `li[id$="${ productType }"]` );
		const inPersonSelector = By.id( 'woocommerce_sell_in_person' );
		const helpWooSelector = By.css( 'p.checkbox' );
		const submitButtonSelector = By.css( 'button[name="save_step"]' );

		await driverHelper.clickWhenClickable( this.driver, countryContainerSelector );
		await driverHelper.clickWhenClickable( this.driver, countrySelector );
		await driverHelper.setWhenSettable( this.driver, addressSelector, address );
		await driverHelper.setWhenSettable( this.driver, address2Selector, address2 );

await driver.wait(function() {
        return driver.findElement(By.id('session-start')).isDisplayed();
      }, 20000);
      //start session

async enterRegistarDetails( {
		firstName,
		lastName,
		emailAddress,
		phoneNumber,
		countryCode,
		address,
		city,
		stateCode,
		postalCode,
	} ) {
		await driverHelper.setWhenSettable( this.driver, By.id( 'first-name' ), firstName );
		await driverHelper.setWhenSettable( this.driver, By.id( 'last-name' ), lastName );
		await driverHelper.setWhenSettable( this.driver, By.id( 'email' ), emailAddress );

		await driverHelper.clickWhenClickable(
			this.driver,
			By.css( `select.phone-input__country-select option[value="${ countryCode }"]` )
		);

		await driverHelper.setWhenSettable( this.driver, By.css( 'input[name="phone"]' ), phoneNumber );

		await driverHelper.clickWhenClickable(
			this.driver,
			By.css( `select[name=country-code] option[value="${ countryCode }"]` )
		);

		await driverHelper.setWhenSettable( this.driver, By.id( 'address-1' ), address );
		await driverHelper.setWhenSettable( this.driver, By.id( 'city' ), city );

async setCommentsPreference( { allow = true } = {} ) {
		const labelSelector = await driverHelper.getElementByText(
			this.driver,
			By.css( '.components-checkbox-control__label' ),
			'Allow Comments'
		);
		const checkBoxSelectorID = await this.driver.findElement( labelSelector ).getAttribute( 'for' );
		const checkBoxSelector = By.id( checkBoxSelectorID );
		if ( allow === true ) {
			await driverHelper.setCheckbox( this.driver, checkBoxSelector );
		} else {
			await driverHelper.unsetCheckbox( this.driver, checkBoxSelector );
		}
	}

address2,
		city,
		postalCode,
		currency,
		productType,
		inPerson = false,
		helpWoo = false,
	} ) {
		const countryContainerSelector = By.id( 'select2-store_country-container' );
		const countrySelector = By.css( `li[id$="${ countryCode }"]` );
		const addressSelector = By.id( 'store_address' );
		const address2Selector = By.id( 'store_address_2' );
		const citySelector = By.id( 'store_city' );
		const stateContainerSelector = By.id( 'select2-store_state-container' );
		const stateSelector = By.css( `li[id$="${ stateCode }"]` );
		const postcodeSelector = By.id( 'store_postcode' );
		const currencyContainerSelector = By.id( 'select2-currency_code-container' );
		const currencySelector = By.css( `li[id$="${ currency }"]` );
		const productTypeContainerSelector = By.id( 'select2-product_type-container' );
		const productTypeSelector = By.css( `li[id$="${ productType }"]` );
		const inPersonSelector = By.id( 'woocommerce_sell_in_person' );
		const helpWooSelector = By.css( 'p.checkbox' );
		const submitButtonSelector = By.css( 'button[name="save_step"]' );

		await driverHelper.clickWhenClickable( this.driver, countryContainerSelector );
		await driverHelper.clickWhenClickable( this.driver, countrySelector );
		await driverHelper.setWhenSettable( this.driver, addressSelector, address );
		await driverHelper.setWhenSettable( this.driver, address2Selector, address2 );
		await driverHelper.setWhenSettable( this.driver, citySelector, city );
		await driverHelper.clickWhenClickable( this.driver, stateContainerSelector );
		await driverHelper.clickWhenClickable( this.driver, stateSelector );
		await driverHelper.setWhenSettable( this.driver, postcodeSelector, postalCode );

async hideSidebarBottom() {
        const versionBox = await this.ctx.driver.findElement(By.id('sidebar-bottom'))
        await this.ctx.driver.executeScript((element: HTMLElement) => {
            element.style.setProperty('display', 'none')
        }, versionBox)
    }