UI Automation CodeceptJs

This article is the second part of our journey in test automation, let's get started

So in out last code we stopped here

Feature('login');


Scenario('test something', (I) => {
    I.amOnPage('https://github.com/');
   

});

Let's add some click methods and fill some fields and really test something!

Feature('login');


Scenario('test something', (I) => {
    I.amOnPage('https://github.com/');
    I.click('Sign in');
    I.fillField('login', 'test user'); 

});

So what is going on here, the click method is looking for something in the page that has text Sign in if we inspect the github page we will see we have the text Sign in inside a tag

<a class="text-bold text-white no-underline" href="/login" 
data-ga-click="(Logged out) Header, clicked Sign in, text:sign-in">Sign in</a>

This is enough to codeceptjs find the link and click on it.

After the click we are filling the username field, if we also inspect the page we will have this code

<input type="text" name="login" id="login_field" 
class="form-control input-block" tabindex="1" autocapitalize="off" 
autocorrect="off" autofocus="autofocus">

Look that we have an attribute called name and has value login this also is enough to codeceptjs find the input field and fill with the second parameter 'test user'

The same works for the password field

Feature('login');


Scenario('test something', (I) => {
    I.amOnPage('https://github.com/');
    I.click('Sign in');
    I.fillField('login', 'test user'); 
    I.fillField('password', 'password');

});

If we run it now (codeceptjs run --step) we'll see that it enters on the page, clicks on sign in and fill the fields, cool, but we aren't testing anything, let's add some methods to check if we are in the correct page

Feature('login');


Scenario('test something', (I) => {
    I.amOnPage('https://github.com/');
    I.click('Sign in');
    I.see('Sign in to GitHub');
    I.fillField('login', 'test user'); 
    I.fillField('password', 'password');
});

We added the method see it will make an assert to check if we are in the correct page, we can put potato to check if find it on the page, try it out! remember to run in console

codeceptjs run --steps

If you tried to find potato it will print in console some errors and it isn't able to find, that's correct, let's hit the button login and check the error message

Feature('login');


Scenario('test something', (I) => {
    I.amOnPage('https://github.com/');
    I.click('Sign in');
    I.see('Sign in to GitHub');
    I.fillField('login', 'test user'); 
    I.fillField('password', 'password');
    I.click('commit');
    I.see('Incorrect username or password.');

});

Run the test again, and voila! we should get the message that scenario is passing

Now you are able to start automate features, you can check on codecept documentation there is a lot of things that could be done.

Congratulations to made it to the end, hope it helped you, any question reach me, I'll be glad to help you out!