에 대한 구성요소 테스트 가상 에이전트

  • 릴리스 버전: Zurich
  • 업데이트 날짜 2025년 07월 31일
  • 소요 시간: 4분

    • 인스턴스에 가상 에이전트 배포하기 전에 사용자 지정 구성요소를 테스트합니다.

    시작하기 전에

    필요한 역할: virtual_agent_admin 또는 admin

    이 태스크 정보

    가상 에이전트 구성요소가 사용자 입력에 올바르게 응답하는지 확인하려면 클라이언트 채팅 내에서 가상 에이전트 구성요소를 테스트해야 합니다. 구성요소 프로젝트에서 속성을 설정하여 모의 가상 에이전트 테스트 클라이언트 도구에서 구성요소를 테스트할 수 있습니다.

    프로시저

    1. 테스트 클라이언트 도구에 대한 종속성을 구성요소 프로젝트에 추가합니다.
      1. 구성요소 프로젝트에서 <component-name>/package.json 파일을 엽니다.
      2. devDependencies 개체에 "@servicenow/sdk-ci": "1.0.8" 및 "@servicenow/library-translate": "^18.0.0"을 추가합니다.
      다음은 올바른 종속성 package.json 있는 파일의 예입니다. 
      "dependencies": {
    "@servicenow/ui-renderer-snabbdom": "취리히",
    "@servicenow/library-translate": "^18.0.0",
    "@servicenow/now-button": "취리히",
    "@servicenow/now-dropdown": "취리히",
    "@servicenow/sass-generic": "취리히",
    "@servicenow/cli-archetype": "취리히",
    "@servicenow/sdk-ci": "1.0.8"
}
    2. 테스트에서 구성요소의 초기 상태로 사용할 샘플 속성을 추가합니다.
      1. 테스트에서 렌더링할 초기 속성이 있는 <component-name>/example/sampleProps.json 파일을 추가합니다.
      다음은 슬라이더 구성요소 sampleProps.json 초기 속성이 설정된 파일의 예입니다. 
      {	
	"label": "How many penguins do you want to buy?",
	"defaultValue": 10,
	"sliderMin": 20,
	"sliderMax": 80,
	"unitName": "penguins",
	"unitIcon": "https://image.flaticon.com/icons/svg/141/141836.svg"  
}
    3. 생성한 샘플 속성을 사용하여 테스트 클라이언트 도구를 통해 구성요소를 열려면 example.js 파일을 업데이트합니다.
      1. 구성요소 프로젝트에서 <component-name>/example/element.js 파일을 엽니다.
      2. @servicenow/sdk-ci와 생성한 샘플 속성 파일을 임포트하기 위한 문을 추가합니다.
      3. 다음 문을 추가하고 <component-name> 을 구성요소의 이름으로 바꾸어 샘플 속성의 초기 데이터로 테스트 도구를 만듭니다. 
        const el = document.createElement('tool-ci-custom-control-tester');
el.componentTagName="<component-name>";
el.initialExampleData=sampleProps;
document.body.appendChild(el);
      다음은 테스트 클라이언트 도구를 사용하여 구성요소를 여는 파일 example.js 예입니다. 
      import '../src/now-chat-control-slider';

import '@servicenow/sdk-ci';

import sampleProps from './sampleProps.json';

const el = document.createElement('tool-ci-custom-control-tester');
el.componentTagName="<component-name>";
el.initialExampleData=sampleProps;
document.body.appendChild(el);
    4. 개발 서버 명령을 실행하여 테스트 브라우저에서 구성요소를 봅니다. 
      $ snc ui-component develop [--entry entry --open --port port --host host]

      이 매개변수에 대한 값을 전달합니다.

      이름 설명
      항목 구성요소 프로젝트의 테스트 모듈 경로입니다.

      기본값: example/index.js.
      오픈 기본 브라우저를 열고 테스트 페이지로 이동합니다.

      기본값은 false입니다.
      포트 개발 서버가 실행되는 포트입니다.

      기본값: 8081.
      호스트 다른 사용자가 외부에서 로컬 개발 서버에 액세스할 수 있도록 하려면 사용할 호스트 주소입니다. 일반적으로 0.0.0.0으로 설정 
      $ snc ui-component develop --entry example/hello.js --open --port 3000

      테스트 클라이언트 도구에서 구성요소가 열립니다. 사용자 지정 통제 JSON 입력 데이터 필드에 제공된 초기 데이터와 사용자 지정 통제 반환 데이터 필드에 제공된 구성요소의 출력을 볼 수 있습니다.

      샘플 슬라이더 구성요소를 표시하는 테스트 클라이언트 도구입니다.

    다음에 수행할 작업

    구성요소가 예상대로 작동하면 인스턴스에 배포합니다. 지침은 다음을 참조하십시오. ServiceNow® 개발자 사이트.

    구성요소를 개발하고 인스턴스에 배포한 후 사용자 지정 컨트롤 및 정의를 사용하여 추가합니다 가상 에이전트 디자이너 . 자세한 내용은 가상 에이전트 사용자 지정 컨트롤을 참조하십시오.