Bind Placeholder Field with airSlate SignNow

Bind placeholder field

with our project setup let's start by writing our first real test and implementing the functionality required for that test to pass we'll be testing that our input is automatically focused when the application loads in order to do that we need a way to identify the input in our test code we can use the application preview along with Chrome's dev tools to inspect elements in the application and get the information we need right inside the app preview and Cypress I'll right-click on the input and choose inspect for in the menu this will open dev tools and go right to the input field in the elements inspector here we can see that this input has a class of new to do and this is what we use to identify the input in our tests now that we have what we need let's close the dev tools and jump back into our test code after the visit command we'll add a call to sign up focused this will get whatever element has focus on our page once we have that we can add an assertion to make sure that the element yielded by focused is our text input by verifying that it has the class new to do once we save this Cypress will detect our file changed and run our test for us again this time we can see a delay before the test ultimately fails two important things happened here one our test failed because Cypress couldn't find a focused element we had an assertion about our class but our failure is because we never got to the assertion in the first place the error message provided in the command log is specific enough to let us know not only that our test failed but exactly which step in the test have failed on with this knowledge we know that we need to change our app code to make sure something is focused when the page loads - there was a delay because ciphers automatically retried that command until a time down when Cypress can't find an element it will retry until it either finds the element or times out this means if an element won't be immediately available you won't need to guess at the timing and add code to wait for random periods of time since we know why our test is failing let's update our app code to make it pass the input field we're concerned about is in the to-do form component so we'll find that under source components and open it up we can set the focus on the input by adding the auto focus property to it well save that and back in the Cypress Runner rerun our test this time our test passes so we know that Cyprus was able to find a focused element and we verified that it's the element we wanted with our assertion let's create a second test here we'll test that our text field accepts input rather than have each new test build up the number of tests we need to run in order to get results we'll put a dot only on our it ensuring that this test will run by itself by doing this on each test as we work through the feature our feedback loop stays fast we can stay focused and we won't unintentionally create dependencies between our tests once again we need to visit our page before we can do anything with its contents double use the side gate command to get our input in our previous test we got the input using side op focused we could use that again here but that would unnecessarily couple this test to another feature we want to test if the field accepts input and it should do that even if the autofocus is no longer requirement in the long run maintenance will be easier if we can keep our test isolated from unrelated features as much as possible when we save our test will run notice that the only made it so only this test ran so far everything is passing so we know that our application can be reached and that the requested element is present if the element were not present a default assertion in get would have failed our test to demonstrate that I'll change the selector used in the get command and we'll see that the test is delayed before it ultimately fails snipers retries the get command until it times out and then we see the failure with an error message that makes it pretty clear that the element we asked for couldn't be found when we correct the selector our test passes again how we can carry on with our test now that we've gotten the input we'd like to type into it we can do that by issuing the type command which will chain on to the game we'll pass in the text we wish to type and once we've typed the text we want to ensure that the fields value matches what we've typed we can do that by chaining a should to our commands and asserting that the input should have a value we want that value to match what we pass to type so rather than typing it again and making the test prone to failure due to input errors I'll grab the string from type and move that into a constant I'll use that constant in the type command and then again to complete this assertion saving and running this test will result in a passing test this test might seem a bit useless but we're going to make this input a controlled input what this essentially means is that instead of standard input behavior like we just witnessed our application code will handle changes to the input and then reset its value so it's possible that our application could alter the input as it's typed we want the controlled input to reflect exactly what the user types so this test will ensure that we get our implementation right with our test in place we can add the current to do property to our application state and will default that value to an empty string then we can pass that value from our state into the to-do form component and then we'll use current to do is the value property on the input now running the test again will result in the failing test our test is making it obvious that our controlled input implementation isn't complete let's write the rest of the code to get this test to pass back in the to-do app component we'll add a method called handle new to do change and we'll use the past and event object to update the state by setting current to due to the value received from the events target we'll add line to the components constructor to make sure this method is called with the correct disk context and then back in our render method we'll pass the new handler down to the jadoo form component in the to-do form component will use the handler for the on change event of the input with all of that wired up we can save our changes and rerun the test and this time our test is passing back in our spec file let's remove the only from the second test when we look at these two tests together and notice a bit of duplication each test is visiting our page before doing anything else rather than continuing to add a visit at the top of each test we can refactor this code to remove the duplication while retaining the existing behavior we'll do this by adding a before each at the top of the describe block so before each as the name implies we run before each individual test we'll put our visit call in this before each and then we can remove the visit from each test with that done we'll run both tests and we'll see that everything ran as expected if we inspect the individual tests in the command log we'll see that each test has a log entry for before each with a visit command being logged out we can take this refactoring one step further we'll be creating multiple spec files and they will all need to visit our application will keep our visit call in the before each but we can move this URL value into the cypress configuration in the root of the project find Cypress JSON which was created when Cyprus first ran and seeded our project we'll add the base URL property here and give it our localhost address as a value with that in place we can go back to our test code and update the visit to simply visit the root of our site let's run our spec file again and we can verify that both tests still run and pass as intended