테스트 및 도구 통합을 위한 HTML 속성

사이트, 특히 SaaS 제품은 통상적으로 Glassbox, Adobe Analytics, Cypress 등 도구와 통합된다.이러한 도구는 DOM의 요소를 조회하거나 바인딩하여 작동하며 일반적으로 클래스 및/또는 ID를 사용하도록 구성됩니다.
클래스와 ID를 사용하는 것은 확실히 유효하지만, 나와 몇몇 동료들은 다른 방법을 제시했다. 속성data-ref

데이터 참조 속성

이 특수 속성은 제3자 도구를 테스트하고 통합하는 전용 선택기로 사용된다.그것은 보기에 다음과 같다.

<button data-ref="..."></button>

이것은 클래스와 마찬가지로 모든 HTML 요소에 적용됩니다.
예제
만약에 끝까지 테스트를 하려면 다음 단계를 계속하기 전에 로그인 단추의 존재를 검증해야 한다.클래스가 아닌 전용 data-ref 속성을 버튼에 추가하고 테스트합니다.

const loginBtn = document.querySelector('[data-ref="login"]');
expect(loginBtn).toBeDefined();

또 다른 예는 제품 매니저가 홈페이지의 새로운 기능에 대한 사용자의 참여도를 분석하고자 하는 것일 수도 있다. 예를 들어 "몇 명이 새로운 기능으로 굴러갔고, 몇 명이'더 보기'링크를 눌렀는가?"추적 중인 요소에 속성 추가data-ref:

<h2 data-ref="home.new-feature.intro">The New Feature!</h2>
<p>Lorem ipsum...</p>
<a data-ref="home.new-feature.expand" href="...">See more</a>

여기에는 그것이 어떻게 사용되었는지 설명하는 몇 가지 간단한 예가 있다.속성의 이름과 값을 더 자세히 알아보겠습니다.
속성 이름
이 이름은 많은 프레임워크에서 사용하는 익숙한 "ref"줄임말을 포함합니다. (ref는reference의 줄임말입니다.)모든 도구에 적용되기 때문에 "test", "e2e", "track", "session"또는 "at"(검수 테스트) 의 의미가 너무 좁기 때문에 Ref를 선택하십시오.
표준 data- 접두사가 추가되어 호환성을 확보하고 ref 프레임의 간섭을 방지합니다.
속성 값
다른 클래스와 혼합된 클래스와 달리 속성 값은 독립적이고 독점적이다.이것은 그것들을 더욱 믿을 만하고 읽을 수 있게 한다.
속성 값도 매우 큰 유연성을 가지고 있다.너는 안에 어떤 물건도 넣을 수 있다.이것은 {page}.{module}.{element} 및 {page}.{items}.{id} 같은 모델을 구축하여 이러한 속성을 접촉하는 모든 사람에게 유용한 상하문을 제공할 수 있음을 의미한다.

<p data-ref="home.announcement">You won!</p>

<button data-ref="account.profile.save">Save</button>

<ul>
  <li data-ref="products.shoes.xm4u-020">Yeezy 500 Salt</li>
  <li data-ref="products.shoes.ac3e-001">Yeezy Boost 380</li>
</ul>

창의력을 발휘하여 당신에게 적합한 어떤 일을 하든지!

수업에 무슨 문제가 있습니까?

아무것도 없다. 그것들을 제외하고는 어떤 일에도 쓰인다.스타일 클래스를 변경하고 의외로 이벤트 귀속이나 테스트를 파괴했습니까?우리 중 많은 사람들이 이미 이렇게 했을 것이다.
사실 이 문제는 매우 보편적이다. 여러 해 동안 많은 방법(경계원법, SMACSS, SUIT, js 접두사 등)이 출현하여 더욱 관리하기 쉬운 클래스를 만드는 데 도움을 주려고 했다.실제로 그들은 지나치게 사용되는 디자인 결함을 둘러싸고 디자인을 하고 있을 뿐이다.
해결 방안은 비밀이 아니다: 결합 해제와 분리 관심사
클래스를 사용하여 해결하는 모든 요구 사항 (하나만 제외) 에는 더 좋은 대안이 있습니다.
이벤트는 클래스가 필요하지 않습니다.사용자 정의 속성, 예를 들어 Bootstrap의data-target는 잘 작동하지만 표준onevent 프로세서는 항상 더 좋은 디자인 선택이다. Vue와 같은 프레임워크는 현재 사용하기 쉽게 한다.안녕히 계세요.
UI 구성 요소, 그것들의 실현은 더욱 좋다.아이콘이나 경고와 같은 단순 구성 요소의 경우:

<div class="icon icon-user"></div>
<div class="alert alert-success alert-dismissible">...</div>

vs.

<m-icon name="user"></m-icon>
<m-alert type="success" autodismiss>...</m-alert>

차이가 크다!익숙한 표기+속성 디자인은 템플릿div와class보다 건장하고 가독성이 강하다.
정말 사용자 정의 HTML 태그의 아름다움에 비해 클래스가 얼마나 나쁜지 봅시다(이 예는 가장 선진적인 CSS):

<div class="mdc-layout-grid">
    <div class="mdc-layout-grid__inner">
        <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3 mdc-layout-grid__cell--span-6-phone"></div>
        <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-9 mdc-layout-grid__cell--span-6-phone"></div>
    </div>
</div>

vs.

<m-row>
    <m-col span="3 sm-6"></m-col>
    <m-col span="9 sm-6"></m-col>
</m-row>

안녕하세요, 정품 API!안녕히 계세요, 복잡한 방법!
테스트와 도구 통합 웹 표준은 존재하지 않기 때문에 .js-* 같은 사용자 정의 속성은 다른 모든 속성과 결합되고 특정한 관심사에 집중하는 것이 다음 선택이다.더 이상 중단된 테스트나 잃어버린 분석은 없다. 왜냐하면 "옳지 않다. 나는 그 종류가 양식에만 쓰인다고 생각했기 때문이다."
양식 범용 양식류는 유형으로 가장 잘 해결하는 수요이다.

데이터 참조 도구 구성

데이터 인용을 사용할 수 있는 도구의 수가 매우 크다.1톤이 있다!일반적으로 다음과 같은 세 가지 유형으로 나뉩니다.
테스트 및 모니터링
구성 요소, 검수, 엔드 투 엔드 테스트 및 현장 모니터링에 사용됩니다.예제:

Datadog Synthetics

측백나무

셀렌

우스갯소리

재방송
이 도구들은 사용자의 세션을 기록하여 향후 기술 지원 상황과 사용자 연구에서 재생할 수 있다.예제:

유리 상자

전편

찻잎

사용자 분석
이러한 도구는 방문한 페이지, 페이지 이벤트, 사용자 상호작용, 장치와 시간 등 대량의 사용자 데이터를 수집합니다.효과적인 제품 조직은 이러한 도구를 사용하여 테스트를 실행하고 데이터를 수집하여 더욱 좋은 결정을 내리도록 한다.예:

Adobe Analytics

구글 분석

모든 이 도구들은 데이터 인용과 클래스와 함께 작동합니다.
[멋진 이야기: 우리가 데이터 리프를 제기했을 때, Full Story는 우리가 사용할 수 없는 유일한 도구였다. 우리는 그들에게 그것을 지지해 달라고 요구했다. 그들은 2주도 안 되어 새로운 버전을 발표했다. Full Story 너무 좋다!]
프로비저닝
데이터 인용을 사용하기 위해 이 도구들을 설정하는 것은 매우 간단하다.클래스 선택기를 사용하는 테스트는 속성 선택기만 사용합니다.

// Before
const loginBtn = document.querySelector('.login');
expect(loginBtn).toBeDefined();

// After
const loginBtn = document.querySelector('[data-ref="login"]');
expect(loginBtn).toBeDefined();

관리 콘솔이 있는 도구는 통합을 구성하는 데 사용될 것이다.도구에 따라 다르지만 사용할 선택기를 설정할 수 있는 설정이 있습니다.예를 들어, 이 Adobe Launch 구성은 데이터 참조가 있는 요소에 대한 모든 클릭을 추적합니다.

다른 도구는 검색 로그/기록을 지원합니다. 일반적인'데이터 인용'검색은 가능한 모든 클래스를 찾아서 검색해야 하는 것보다 훨씬 좋습니다.

결론

Dataref의 결합 해소와 집중 디자인은 그 목적을 명확히 하고 유형과 관련된 위험을 피했다.따라서 웹 표준*이 없는 상황에서 데이터 인용은 테스트와 도구 통합의 다음 최선의 방법일 수 있다.
* 새로운 기준을 제시할 수도 있습니다.아리아를 생각하고 있는데...만약 당신이 합작에 흥미가 있다면, 저에게 메시지를 남겨 주십시오
당신은 어떻게 생각합니까?당신은 또 어떤 다른 방법을 시도해 본 적이 있습니까?