Detailed Explanation of Appium Tests with CodeceptJS

What is Codeceptjs?

CodeceptJS is a behavior-oriented testing tool. It uses helpers such as WebdriverIO, Protcator, Nigthmare, Puppeteer. The biggest advantage it offers us is easy writability, easy understanding, and easy backward editing with a simple Page Object structure.

Setup
First of all, we will need Appium, Appium Inspector (so that we can find the ID CLASS and XPATH of the elements while writing our tests), Android Studio, and Visual Studio Code.

1. I assume these applications are installed on your computer and I switch to codeceptJS installation.
2. Open an empty folder in Visual Studio.
3. First, we need to create a package.json file. So, we run the npm init -y command in Visual Studio terminal and our package.json file is created.
4. After that, we need to install codeceptJS-webdriver io in our file. We run the command npm install codeceptjs webdriverio --save in Visual Studio terminal.
5. The next step, we need to install the codeceptjs-appium file, for this, we run the npx codeceptjs init command in Visual Studio terminal. After running this command codeceptJS will ask us some questions, actually, the questions here are about what we want to do.

Since we use Appium in this article, I would like to share with you the steps we need to proceed with;

If we would like to use typescript, we type “Y”, if we don’t want it, we type “N” and then press enter.

Where do we want to save our tests?

If you want to keep it in another folder, you can write it as ./foldername/*_test.js.

We can change all the selections we have chosen here later from the codeceptjs.conf.js file. I’m leaving it here as default for now.

Here is asked which test tool we are working with, in this case, we choose Appium.

We choose the language.

In this screenshot it’s asked which URL to run Appium, we leave the default and will edit it later.

We choose Android because we will work with Android Studio.

It asks for the name of the device we are planning to use, we leave the default and will edit it later, like in the previous step.

Settings

Now that we have completed the installation, we have a few small adjustments to make. We open our Codecept.conf.js file;

Here are the fields we need to edit:

• app: “We give the file path of the application we will use”
• platform: “Android”
• device: “The name of our device”

And now we are ready to write the test!! 👋

Here is an example:

First, we put a login .apk file (it could be any app) that we found from Google into our Visual Studio file.

Let’s understand the CodeceptJS Page Object structure; Let’s create a page file with the npx codeceptjs gpo command.

Because I will run a login test here, that’s why I created a page called loginPage.

You can give any name; The purpose of this is to collect all the elements of the login screen on a single page. Creating a structure that we will not have to find these elements again in another test that we will do on the login screen later on. This is exactly the biggest advantage that CodeceptJS has given us. We can easily call the pages to our tests with the injection structure.

Now, let’s define the elements in our page file.

Now let’s create our test file, we create an empty test case with the npx codeceptjs gt command and write our test case.

The code const{ loginPage } = inject(); may have confused you in the image above.

Now we can run our test 🎯 with npx codeceptjs run --steps

GitHub project:
https://github.com/volkanerturk/codeceptjs-appium