Slack 알림을 테스트하는 방법

마케팅 양식은 마케팅 팀이 보다 빠르고 정확한 응답을 제공할 수 있도록 타사 시스템에 연결되는 경우가 많습니다.

연락처 페이지를 Slack, HubSpot, SendGrid 및 이메일과 통합했습니다. 누군가가 양식을 작성할 때마다 이메일, Slack 메시지를 통해 적절한 사람에게 알리고 해당 연락처의 향후 관리를 위해 HubSpot 및 SendGrid에 레코드를 생성합니다.



어느 날 우리는 이메일을 받았지만 Slack 알림이 오지 않았기 때문에 Slack 알림을 테스트하여 이 영역에서 퇴보를 포착해야 한다는 생각을 하게 되었습니다.

이를 달성하려면 다음 두 가지가 필요합니다.

테스트 메시지용 테스트 채널

양식을 보내줄 테스트

platformOS 알림 설정

platformOS API 호출 알림은 WebHook을 지원하므로 Slack 메시지에 WebHook을 사용했습니다. 설정에는 몇 줄의 코드만 포함되지만 이 기사의 맥락에서 가장 중요한 것은 WebHook URL입니다.

---
name: slack_landing_sales
delay: '0'
enabled: true
format: http
headers: '{ "Content-Type": "application/json" }'
request_type: POST
to: https://hooks.slack.com/services/XXX/XXX/XXX
trigger_condition: true
---
{
"text": "
Heads up! Contact from {{ form.properties.url }}.
Name: {{ form.properties.first_name }} {{ form.properties.last_name }}
Email: {{ form.properties.email }}
Phone: {{ form.properties.phone }}
Comments: {{ form.properties.description }}",
} 

변경할 라인은 내가 검열한 to: [https://hooks.slack.com/services/XXX/XXX/XXX](https://hooks.slack.com/services/XXX/XXX/XXX)가 있는 라인입니다. 채널에 메시지를 보내려면 고유한 웹후크 URL이 필요합니다.

테스트 데이터를 프로덕션 Slack 채널로 보내지 않으려면 프로덕션을 다른 모든 것과 차별화하는 것이 좋습니다.

to: >
  {% if form.properties.url contains 'https://www.platformos.com' %}
  https://hooks.slack.com/services/XXX/XXX/XXX
  {% else %}
  https://hooks.slack.com/services/YYY/YYY/YYY
  {% endif %}

이 if 조건은 url라는 양식 필드에 특정 문자열이 포함되어 있는지 확인합니다. 양식을 보내기 전에 채우고 있기 때문에 인스턴스의 URL로 채워집니다. 저희 생산현장의 경우 https://www.platformos.com 입니다.

TestCafe의 E2E 테스트

이제 프로그래밍 방식으로 양식을 살펴보고, 채우고, 전송하고, 성공적으로 전송되었는지 확인해야 합니다.

우리는 E2E 테스트를 위해 TestCafe를 사용합니다. 테스트 경험이 있다면 사용을 시작하는 것은 그리 어렵지 않습니다.

import { Selector } from 'testcafe';
import { BASE_URL } from './env';
import faker from 'faker';

fixture('Contact').page(`${BASE_URL}/contact`);

test('Contact form works', async (t) => {
  const fn = Selector('[name="form[properties_attributes][first_name]"]');
  const ln = Selector('[name="form[properties_attributes][last_name]"]');
  const email = Selector('[name="form[properties_attributes][email]"]');
  const phone = Selector('[name="form[properties_attributes][phone]"]');
  const description = Selector('[name="form[properties_attributes][description]"]');
  const submitBtn = Selector('button').withText('SUBMIT');

  const notice = Selector('[role="alert"]').withText('Your contact form has been sent');

  await t
    .typeText(fn, faker.name.firstName())
    .typeText(ln, faker.name.lastName())
    .typeText(email, faker.internet.email())
    .typeText(phone, faker.phone.phoneNumber())
    .typeText(description, faker.lorem.paragraph(), { paste: true });

  await t.click(submitBtn);

  await t.expect(notice.exists).ok();
});

여기서 진행되는 내용에 대한 간략한 요약:

TestCafe 및 faker 가져오기(테스트가 실행될 때마다 테스트가 달라지도록 가짜 데이터 생성)

테스트가 실행될 URL을 TestCafe에 알리기

상호 작용할 모든 DOM 요소에 대한 선택기 정의

양식에 모든 데이터 입력

양식 제출 중

양식을 보낸 후 Your contact form has been sent 메시지가 표시되는지 확인

크롬에서 테스트를 실행하면 예쁜 비디오가 생성됩니다.



터미널에서 TestCafe를 실행한 후 비슷한 내용이 표시되어야 합니다.

> testcafe chromium tests --video artifacts --video-encoding-options r=20

 Running tests in:
 - Chrome 88.0.4295.0 / macOS 10.15.7

 Contact
 ✓ Contact form works

 1 passed (38s)

이는 테스트가 통과되었음을 의미하므로 이제 Slack 알림이 전달되었는지 확인할 차례입니다. 이것이 이 테스트에서 생성된 것입니다.

지속적인 통합

삶을 더욱 자동화하기 위해 CI 워크플로에 npm run test-ci 명령을 추가합니다. 이 프로젝트에서는 Jenkins를 사용하지만 원하는 경우 Github Actions, Travis 또는 CircleCI를 사용할 수 있습니다. CI 서버에는 TestCafe에서 지원하는 브라우저가 있어야 합니다( see the list of officially supporter browsers here ).

우리의 경우 모든 마스터 분기 실행에서 테스트를 실행하는 것은 다음과 유사했습니다.

stage('Test on URL') {
    agent { docker { image "platformos/testcafe" } }
    environment { MP_URL = "${params.MP_URL}" }
    steps {
      sh 'npm run test-ci'
    }
    post { failure { archiveArtifacts "screenshots/" } }
}

또한 실패의 스크린샷만 찍고 헤드리스 브라우저에서 테스트를 실행하기를 원하기 때문에 CI에서 다른 명령을 사용합니다(훨씬 더 빠릅니다. 위의 테스트는 38초가 아닌 6초 만에 실행됩니다).

testcafe 'chromium:headless' --screenshots-on-fails --screenshots=screenshots tests

이제 코드가 마스터 분기에 병합될 때마다 TestCafe는 이 양식을 테스트하고 Slack 웹후크를 트리거합니다. 언젠가 메시지가 누락되거나 테스트가 실패하면 당사 또는 Slack 측에 문제가 있음을 알게 됩니다.

자원

이 가이드가 회귀를 피하는 데 도움이 되기를 바랍니다. 다음은 우리의 길을 따르기로 결정한 경우 유용할 수 있는 몇 가지 리소스입니다.

platformOS Website

platformOS Documentation

Slack - Creating App with WebHooks

TestCafe testing framework

faker npm package

더 읽어보기

보다 성능 지향적인 콘텐츠에 관심이 있으시면 저를 따르십시오. 귀하의 웹 사이트를 개선하는 독창적이거나 최소한 효과적인 방법을 제공할 것을 약속드립니다.

기존 웹페이지에서 WebP 사용

Paweł Kowalski ・ 11월 17일 ・ 4분 읽기

#webperf #design

웹용 이미지 최적화

Paweł Kowalski ・ 4월 24일 ・ 8분 읽기

#beginners #node

웹사이트 속도를 유지하기 위한 3가지 팁

Paweł Kowalski ・ 6월 24일 ・ 6분 읽기

#webperf #webpack #javascript #css