Jsdom: 내부텍스트 구현

그리고 무슨 유감이 돌아 다니기에 알맞은 Selection 및 innerText 라이브러리가 jsdom와 호환되지 않습니다 : https://github.com/timdown/rangy/issues/348

따라서 innerText는 표준이 아니며 적어도 하나의 주요 엔진(Firefox)에서 구현되지 않습니다. 표준이 없으면 구현해야 한다고 생각하지 않습니다.

여기에 초안 사양이 있는 이 모든 일에 약간의 움직임이 있는 것 참조를 참조하십시오 . 하지만 리포지토리에는 문제가 없으므로 이미 완료되었는지/얼마나 빨리 진행되는지 궁금합니다.

Firefox가 구현했습니다: https://bugzilla.mozilla.org/show_bug.cgi?id=264412

WHATWG는 승인할 것 같습니다: https://github.com/whatwg/compat/issues/5#issuecomment -168049752

사양에서 보면 기본 레이아웃 지원 없이는 innerText 제대로 구현할 수 없는 것 같습니다.

네, 이것은 많은 인프라 작업 없이는 어쨌든 jsdom에서 구현할 수 없을 것입니다... 아무도 희망을 갖지 않습니다 :(.

레이아웃 지원 요구 사항: https://github.com/rocallahan/innerText-spec/issues/2

WHATWG 채택으로 인해 구현할 계획이 있습니까?

예... 사양에는 jsdom에 없는 많은 것들이 필요하지만 CSS 상자 주변에는 :(. 무엇을 해야 할지 잘 모르겠습니다.

jsdom과 함께 연결할 라이브러리가 있습니까?

@domenic care가 왜 이것이 그러한 인프라 점검인지에 대한 지식을 삭제하시겠습니까? 우리는 방에있는 800lb 고릴라가 lo-key를 떠날 것이라고 생각했습니다. 그러나 아무데도 가지 않는 것처럼 보입니다. 아시다시피 jsdom의 내부를 둘러싸고 있습니다. repo에서 jsdom newb에 대한 코드 검토를 시작하기에 좋은 위치는 어디인가요?

미리 감사드립니다🙏 /cc @vsemozhetbyt

주요 문제는 innerText 가 안내를 위해 레이아웃 엔진에 의존하고 jsdom에는 레이아웃 엔진이 없다는 사실입니다. https://html.spec.whatwg.org/multipage/dom.html#the -innertext-idl-attribute 및
http://perfectionkills.com/the-poor-misunderstood-innerText/ . 두 번째 링크에서:

innerText가 페이지에 텍스트가 표시되는 방식을 거의 정확하게 나타내는 방법에 주목하세요. 반면에 textContent는 이상한 일을 합니다.
그리고 styled-as-block 요소 주변( 이 경우).

여전히 범위를 벗어났고 해결 방법이 없습니까?

분명히 사양은 다음과 같이 말합니다.

이 요소가 렌더링되지 않거나 사용자 에이전트가 비 CSS 사용자 에이전트인 경우 [강조 추가됨] 이 요소의 textContent IDL 속성과 동일한 값을 반환합니다.

해결 방법은 단순히 textContent 를 반환하는 것입니다.

우리는 그것이 적용되지 않는다고 생각하는 충분한 CSS를 구현합니다. 우리는 레이아웃 부분을 구현하지 않습니다 ...

안녕하세요 여러분, 이것에 대한 소식이 있습니까?

헤드리스 크롬만 사용하세요 :)

@coreh 가 언급한 해당 사양의 @domenic :
https://html.spec.whatwg.org/multipage/dom.html#the -innertext-idl-attribute

이 요소가 렌더링 되지 않거나 사용자 에이전트가 CSS가 아닌 사용자 에이전트인 경우 이 요소의 textContent IDL 속성과 동일한 값을 반환합니다.

https://html.spec.whatwg.org/multipage/rendering.html#being -rendered

연결된 CSS 레이아웃 상자, SVG 레이아웃 상자 또는 기타 스타일 언어의 이에 상응하는 요소가 있는 경우 요소가 렌더링 되는 것입니다.

jsdom 이 레이아웃 부분을 구현하지 않으면 "렌더링되지 않음"이 적용되지 않습니까?

이 메시지는 함수 구현을 변경하지 않고 테스트를 통과하는 방법을 원하는 이 github 스레드에 도달하는 모든 사람을 위한 것입니다.

테스트 파일 상단에 대한 copypasta:

// Expose JSDOM Element constructor
global.Element = (new JSDOM()).window.Element;
// 'Implement' innerText in JSDOM: https://github.com/jsdom/jsdom/issues/1245
Object.defineProperty(global.Element.prototype, 'innerText', {
  get() {
    return this.textContent;
  },
});

당연히 위의 논의에서 나온 주의 사항이 적용됩니다.

다른 사람이 이 문제에 직면하는 경우를 대비하여 한 단계 더 나아가 sanitize-html 패키지를 사용하여 기본적으로 브라우저가 수행하는 작업을 확인했습니다(참고로 JSDOM 설정은 필요하지 않았기 때문에 가져오지 않았습니다. 이것을 내 Jest 설정 파일에 넣을 때 Jest를 사용하지 않는다면 @bennypowers가 권장하는 global.Element = (new JSDOM()).window.Element 설정을 사용하고 싶을 것입니다.

Object.defineProperty(global.Element.prototype, 'innerText', {
  get() {
    return sanitizeHtml(this.textContent, {
      allowedTags: [], // remove all tags and return text content only
      allowedAttributes: {}, // remove all tags and return text content only
    });
  },
  configurable: true, // make it so that it doesn't blow chunks on re-running tests with things like --watch
});

비슷한 필요가 있었지만 textContent 사용하는 것보다 약간 더 나아가고 싶었습니다. 다시 말하지만, 이것은 특히 CSS에 의해 숨겨진 요소와 관련하여 브라우저가 실제로 수행하는 작업에 대한 정확한 표현은 아니지만 좋습니다. 내 사용 사례에 충분합니다.

function innerText(el)
  el = el.cloneNode(true) // can skip if mutability isn't a concern
  el.querySelectorAll('script,style').forEach(s => s.remove())
  return el.textContent
}

유감입니다!

분명히 사양은 다음과 같이 말합니다.

이 요소가 렌더링되지 않거나 사용자 에이전트가 비 CSS 사용자 에이전트인 경우 [강조 추가됨] 이 요소의 textContent IDL 속성과 동일한 값을 반환합니다.

해결 방법은 단순히 textContent를 반환하는 것입니다.

우리는 그것이 적용되지 않는다고 생각하는 충분한 CSS를 구현합니다. 우리는 레이아웃 부분을 구현하지 않습니다 ...

@domenic 사양에 대한 보다 자유로운 해석을 고려하십시오.

textContent 는 CSS 규칙을 적용하는 데 비용이 너무 많이 드는 경우 대체로 명시적으로 허용됩니다.

또한 innerText는 getter 및 setter 로 지정됩니다.

내가 사양 편집자임을 감안할 때 "CSS 규칙을 적용하는 데 비용이 너무 많이 드는 경우"는 사양에서 말하는 것이 아님을 자신 있게 말할 수 있습니다.

.. "사용자 에이전트가 CSS가 아닌 사용자 에이전트인 경우"에 대한 내 해석이었습니다.

"CSS 사용자 에이전트"와 "비 CSS 사용자 에이전트"의 차이점은 무엇입니까?

는 어때:
CSS 사용자 에이전트는 "CSS 규칙을 적용"하고 결과(그래픽 또는 텍스트)를 출력할 수 있습니다.
비 CSS 사용자 에이전트는 "CSS 규칙을 적용"하기에는 너무 멍청합니다.

우리는 그것이 적용되지 않는다고 생각하는 충분한 CSS를 구현합니다.

무슨 뜻이에요? window.getComputedStyle?

textContent로의 대체는 표준 인터페이스를 구현하지 않는 것보다 여전히 낫습니다.

어쩌면 우리가 사용할 수있는 textContent 결과 대체 할 값을 innerText 반면에 테스트 실행 jsdom . 예를 들어:

describe('mytest', () => {
  beforeAll(() => {
    Object.defineProperty(HTMLElement.prototype, 'innerText', {
      get() {
        return this.textContent;
      }
    });
  });
  it('should ok', () => {
  // test assertions
  });
});