Automating Permission Screen for Slack Apps

As the luck(or as I like to term as the uncertain) would have it, here I was automating REST APIs for our product’s slack app, expecting a well-deserved break from the web page & mobile object identifiers, the web drivers, and all that, for about a good 5 years; there we have this slack permission screen, which standups tall before we can do any subsequent actions. aka. posting messages to the Slack channels.

Luckily, without much headache, we can achieve the action automation thanks to the data test ids Slack has added to their web pages, which they are calling the ‘data-qa’ attribute.

On to the Code/ TLDR

const WAIT_TIMEOUT = 60;
      await codeceptjs.container.helpers('Puppeteer')._startBrowser();
      await codeceptjs.actor().amOnPage('<SLACK_TRANSACTION_URL>');
      await codeceptjs
        .actor()
        .waitForElement('[data-qa="signin_domain_input"]', WAIT_TIMEOUT);
      await codeceptjs
        .actor()
        .fillField(
          '[data-qa="signin_domain_input"]',
          '<YOUR_SLACK_INSTANCE>',
        );
      await codeceptjs.actor().click('[data-qa="submit_team_domain_button"]');
      await codeceptjs
        .actor()
        .waitForElement('[data-qa="login_email"]', WAIT_TIMEOUT);
      await codeceptjs
        .actor()
        .fillField('[data-qa="login_email"]', '<USERNAME>');
      await codeceptjs
        .actor()
        .fillField('[data-qa="login_password"]', '<PASSWORD>');
      await codeceptjs.actor().click('[data-qa="signin_button"]');
      await codeceptjs
        .actor()
        .waitForElement('[data-qa="oauth_channel_input-input"]', WAIT_TIMEOUT);
      await codeceptjs.actor().click('[data-qa="oauth_channel_input-input"]');
      await codeceptjs
        .actor()
        .waitForElement(
          '[data-qa="oauth_channel_input_option_2"]',
          WAIT_TIMEOUT,
        );
      await codeceptjs
        .actor()
        .click('[data-qa="oauth_channel_input_option_2"]');
      await codeceptjs
        .actor()
        .waitForElement('[data-qa="oauth_submit_button"]', WAIT_TIMEOUT);
      await codeceptjs.actor().click('[data-qa="oauth_submit_button"]');
// Add code here to validate successful Slack channel integration
      await codeceptjs.container.helpers('Puppeteer')._stopBrowser();
    },

This is a codeceptJS example with Puppeteer and Chromium example, Please modify according to your requirements

Explanation

1. This being a backend REST API project, start a Chromium instance only when test-cases involving slack permission granting are required. Once the permission is granted, close the Chromium instance
2. In the function update the <SLACK_TRANSACTION_URL> with the transaction url returned by the Slack, <YOUR_SLACK_INSTANCE> with your instance name, for e.g in example-dev.slack.com, example-dev is the instance name, provide the <USERNAME>and <PASSWORD> of your test user. The presumption is that this user already has access to this slack instance. (Handling user addition is easy from slack side, but the extra email validation makes it not worth the effort to add to automation)
3. In the channel selector screen, I have used the oauth_channel_input_option_2 which is my test instance’s channel where I want messages to be posted. Each of the options are displayed by slack as oauth_channel_input_option_1, oauth_channel_input_option_2, oauth_channel_input_option_3 etc. So choose the correct channel identifier for your setup by using Developer tools Inspector in Chrome.
4. I have omitted the code where the successful integration message is displayed, this being a custom code from our codebase. Check for your own instance and modify something like this, which I have used in our setup. await codeceptjs.actor().waitForText(‘Success’,WAIT_TIMEOUT);

That's it! Now the slack app permission screen will be “handled” by your automation code.

Happy Test Automation!