Testing a Facebook chatbot with Nightmare.js [pt. 1]

On this tutorial we will see how to create an end-to-end test with to test a . Nightmare.js Facebook chatbot It is assumed that you already have a Facebook chatbot running, because we will not see how to build one here. On this article, the we will focus on creating a and a on Facebook. This will have the capabilities to login into Facebook and chat with our BOT. For that, we will use a , so that our chatbot can send and receive messages through it. first part, test user test page test user test page Optionally, on the end of this tutorial, we will see how to configure the Azure Bot Service to connect the BOT with the the . test page When i finish writing the , i will post the link . It will be the last part, where we will write a simple question & answer api on Nightmare.js to test the chatbot. second part here Index: Create a Test User Create a Test Page Link the Test Page with the BOT application (Optional) Connect the BOT with the Test Page on Azure Lets get started… Create a Test User According to the Facebook, a Test User is described as: Test Users are special Users you can use to test your app. They are , and any data you generate with a Test User will only be visible to other Test Users on that app, or to real Users who have a Admin, Developer, or Tester role on the app. Test Users are also exempt from our spam and fake account detection systems, so they won’t be disabled when you use them to test your app. hidden from real User accounts To know more about Test Users you can access this link. Since we are trying to test our BOT, it is very likely that we had to set up a Facebook Application so the BOT could trade messages with Messenger. We can create Test Users on the Facebook application page, which can be accessed on the . apps dashboard On the App Page, click on to open a submenu, and next on . This will open the page that allow us to create test users, as shown on . Functions Test Users Figure 1 Figure 1 —Test Users page Click on Add to open a modal, as shown at . Them, select “Yes” for “Authorize Test Users for This App”. Figure 2 It is necessary to give the Test User the right permissions to create and send messages to the Test Page that we will be creating. The Login Permissions are: , and . manage_pages pages_show_list pages_messaging We can leave the other options with their default values. Figure 2 — Creating the Test User Next we need to set a password. Otherwise we can’t login on Facebook (or Messenger) with the Test User. It is important to set the password before getting the token because every time the password is changed we need to generate a new token. Click on to open a little menu, then click on “Change the name or password for this test user”, as shown on . Edit Figure 3 Figure 3 — Setting the test user password After changing the user’s password, click again on . This time, click on “Get an access token for this test user” as shown on . Don’t forget to save the generated token for later. Edit Figure 4 Figure 4— Getting an access token for the test user Now that the Test User is set up. We can now login on with his Email and Password. Try it out, because that is how we will be logging in with the application. Facebook Messenger Nightmare.js Notice that this user can’t send messages yet. We also cannot send messages to the BOT with him. This is the reason we will be creating a Test Page on the next step. The BOT needs to be configured to send and receive messages from the Test Page too. On the end, we will have two (or maybe more) pages connected with our BOT application. Create a Test Page Test pages allow us to test the BOT’s application without using our production page. Creating a Test Page is very straightforward, we just need to send a POST request using the . Facebook Graph API POST /v3.1/:testUserId/accounts : Select your BOT application name Application : Paste the Test User access token you got on the previous step. Access Token (required): Query Params name: The page name. category_enum: The page category. about: The page’s about. picture: Some valid picture for the page. cover_photo: Some valid cover foto You can check on the section for more information about this API. Now, we will use the following query parameters to create the Test Page. Links name: Jackson Albiejejcdjhd Liescu Personal Blog category_enum: PERSONAL_BLOG about: Jackson Albiejejcdjhd Liescu test page picture: https://avatars1.githubusercontent.com/u/149531?v=3&s=460 cover_photo:{“url”:”https://orig00.deviantart.net/7db9/f/2016/303/7/5/nature_beautiful_wheat_field___facebook_cover_by_tweakertea-damsgob.jpg”} POST /v3.1/100470524281527/accounts?name=Jackson Albiejejcdjhd Liescu Personal Blog&category_enum=PERSONAL_BLOG&about=Jackson Albiejejcdjhd Liescu test page&picture= "url":" "} https://avatars1.githubusercontent.com/u/149531?v=3&s=460&cover_photo={ https://orig00.deviantart.net/7db9/f/2016/303/7/5/nature_beautiful_wheat_field___facebook_cover_by_tweakertea-damsgob.jpg The shows the result after we send the POST request to the Facebook Graph API. If it was successful, the Test Page ID will be returned. Save it for later. Figure 5 Figure 5 — Creating a Test Page Link the Test Page with the BOT application To make the chatbot receive and send messages through the Test Page, we need to get an access token for the page. However, the access token registered to the page by default is a short-term access token, meaning that it expires in a very brief period of time. What we will do next is to “transform” this access token into a long-term access token, which has a lifetime of 60 days. We can always use the default (short-term) access term to refresh our long-term access token. Retrieving the Test Page’s Page Access Token short-term GET /v3.1/me/accounts : Select your BOT application name Application : The test user access token Access Token Figure 6 To subscribe the page we just need to send another POST request. But first, change the Access Token with the Test Page access token. This will subscribe the app on the current selected application. If all permissions was defined correctly, we should receive a message. success POST /me/subscribed_apps Figure 7 Get a Page Access Token for the Test Page long-term We can retrieve our long-term access token with another API call. However, this time we will use the command, because this API cannot be accessed on the Graph API Explorer. CURL If you don’t have CURL, you can choose whatever application you wish other that can send POST requests. The following command query params: curl client_id: Facebook Application Id client_secret: Facebook Application Secret fb_exchange_token: The Page token curl -X GET "https://graph.facebook.com/oauth/access_token?grant_type=fb_exchange_token&client_id=&client_secret=&fb_exchange_token=" ---------------------------------------- Response:{"access_token": "EAAcJ5P3IBycBAEencptoDloIKrAfDP0WZCTl3zMKCSCUiZBD14hja7DhGczPWdDDXVYKesZABugggCrg0AkUYHiySb1dm3VzHRuwURxHIHM1373KFFiPPW7U6Xse3tAGOYYAecaaHjiKl0XmR5NxfE3v40vrZCKFtby253wvcotO8QueTLuEZBVVl38ZD","token_type": "bearer","expires_in": 5184000} Now, if we try to login into Facebook Messenger we can see that it is possible to send messages to Test Page we’ve just created. For that, just search for the Test Page name on the Search bar and the Page should appear on the results. shows the final result of this tutorial. Figure 8 Figure 8 — Chatting with the Test Page (Optional) Connect the BOT with the Test Page on Azure This step assumes that you are using Azure Bot Service to create chatbots. On the resource, click on > . This page is where you might have linked your BOT application to the Facebook Messenger. Bot Channels Registration Channels Facebook Messenger To connect the BOT with the Test Page, click on “+ Add a new page” and insert the Test Page ID and the Test Page long-term Access Token. Now you should have two pages linked with your bot: the original and the test page. The chatbot should be linked to your Test Page now. To check that, login on Messenger with the Test User credentials and try to send a message to the Test Page. If everything went correctly, the bot will send an answer back. An example is presented on . Figure 9 Figure 9 — BOT chatting with the Test Page We have successfully created a Test User and a Test Page. Now we have in hands all we need to create the end-to-end test for our chatbot: the Test User’s email and password, and a Test Page where the BOT can chat with the user. On the second part of this tutorial we will see how to use what we’ve done here to test our chatbot integration. See you later! Links: https://developers.facebook.com/docs/apps/test-users https://developers.facebook.com/docs/apps/test-pages https://developers.facebook.com/docs/graph-api/reference/page-category/ https://developers.facebook.com/tools/explorer https://www.messenger.com https://azure.microsoft.com/pt-br/services/bot-service/