You can test out locators in Chrome using the developer tools. Open the Inspect window (you can right click any where on the window and select Inspect from the context menu). Go to the console. If you want to test a CSS selector you can use:
document.querySelectorAll("selector goes here")
Just change the "selector goes here" to the CSS selector you are testing. For example, in CSS the selector for an id would be: "#addButton". If this returns an empty array then it is not the correct CSS selector.
That said, the error message indicates that it is failing to find the element with id="login-form-username". So you might want to attempt to see if you can locate that. The CSS selector for id is prepend it with #. The XPath locator for id is a little more complicated. Something like id="login-form-username" would be "//*[@id='login-form-username"). To test an XPath locator in the console use:
$x("//*[@id='login-form-username']")
Also note that the top bar of the console allows you to select which frame you are looking at. The 'top' frame is the default or main frame. If there is no <iframe> or <frame> tags then the 'top' frame is the only frame. However, if your login form is in a different frame, you will need to switch to the frame (in Selenium code) before you attempt to find the elements in that form.
A third possibly is that the login form isn't visible. Selenium will not click on elements which are not visible. If you can see it in the DOM but it has something like style='display: none' then it isn't clickable. Maybe you have to click on a login button or something before the form will be visible.