NoSuchElementError: Unable to locate element - Selenium webdriver using Javascript

Question

So, I know the issue due to countless hours of research. The only issue is that no one is basing their code like the way I do and/or are not clear on where/what to insert in my code. I know you need to do either a try/catch statement and/or to do the wait.until statement. I've tried both to no success, and would greatly appreciate any help. Thanks in advance!

require('chromedriver');
const selenium = require("selenium-webdriver");
const By = selenium.By;
const until = selenium.until;

const driver = new selenium.Builder().forBrowser("chrome").build();

driver.get("https://qa.chaplinq.org/LinQ/Account/SignIn");

const locators = {
    loginForm: By.id("login-form"),
    loginField: By.css("input#UserName"),
    loginPass: By.css("#login-form input[name='Password']"),
    signIn: By.css("form#login-form > footer > button"),
    createAcc: By.css("a#createAccountBtn"),
    applyfirstName: By.css("input#FirstName"),
    applylastName: By.css("input#LastName"),

function createAcc() {
    driver.findElement(locators.createAcc).click();

};

function firstName(text) {
    driver.findElement(locators.applyfirstName).sendKeys(text);
};

createAcc();
firstName("kevin");

[ERROR] node : (node:1896) UnhandledPromiseRejectionWarning: 
NoSuchElementError: no such element: Unable to 
[ERROR] locate element: {"method":"css 
selector","selector":"input#FirstName"}
[ERROR] At line:1 char:1
[ERROR] + node index.js
[ERROR] + ~~~~~~~~~~~~~
[ERROR]     + CategoryInfo          : NotSpecified: ((node:1896) 
Unh...put#FirstName"}:String) [], RemoteExcepti 
[ERROR]    on
[ERROR]     + FullyQualifiedErrorId : NativeCommandError
[ERROR]  
[ERROR]   (Session info: chrome=69.0.3497.100)
[ERROR]   (Driver info: chromedriver=2.42.591088 
(7b2b2dca23cca0862f674758c9a3933e685c27d5),platform=Windows NT 
[ERROR] 10.0.17763 x86_64)
[ERROR]     at Object.checkLegacyResponse 
(C:\users\kevin.yu\node_modules\selenium-webdriver\lib\error.js:585:15)
[ERROR]     at parseHttpResponse (C:\users\kevin.yu\node_modules\selenium- 
webdriver\lib\http.js:533:13)
[ERROR]     at Executor.execute (C:\users\kevin.yu\node_modules\selenium- 
webdriver\lib\http.js:468:26)
[ERROR]     at process._tickCallback (internal/process/next_tick.js:68:7)
[ERROR] 
[ERROR] (node:1896) UnhandledPromiseRejectionWarning: Unhandled promise 
rejection. This error originated either 
[ERROR] by throwing inside of an async function without a catch block, or by 
rejecting a promise which was not 
[ERROR] handled with .catch(). (rejection id: 1)
[ERROR] 
[ERROR] (node:1896) [DEP0018] DeprecationWarning: Unhandled promise 
rejections are deprecated. In the future, 
[ERROR] promise rejections that are not handled will terminate the Node.js 
process with a non-zero exit code.
[ERROR] 

Answer 1

"NoSuchElementError" suggests that the element is not present (yet) in the HTML document. This can occur when some elements appear/disappear dynamically. When your Selenium scripts run faster than the element loads, the element is not visible yet and this error will be thrown.

In your case, does the element input#FirstName appear only after input#FirstName has been clicked?

If so, consider adding a pause or wait function in between createAcc() and firstName()