How to get only the text that's visible to the user when using CSS line-clamp?

[unikitty37]

If I have the following HTML

<div id='test' style='width: 4em; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;'>
  This is a long piece of text which will be truncated.
</div>

it will display as something like This is a….

However, cy.get('#test').invoke('text').should('not.include', 'will be truncated.') fails, as invoke('text') returns the full text of the DOM element, not what's actually displayed on the screen.

Given Cypress is intended for testing what the user sees on screen, rather than what's in the HTML source, I assume I'm doing this wrong 😀

How can I test what's actually displayed on the screen when line-clamp is used? I've had to change vue-snip to using JavaScript rather than CSS for truncation, but I'd rather use CSS…

[bahmutov]

Visual testing is your best bet for this

…

Sent from my iPhone

On Feb 17, 2022, at 07:24, John Yeates ***@***.***> wrote:  If I have the following HTML <div id='test' style='width: 4em; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;'> This is a long piece of text which will be truncated. </div> it will display as something like This is a…. However, cy.get('#test').invoke('text').should('not.include', 'will be truncated.') fails, as invoke('text') returns the full text of the DOM element, not what's actually displayed on the screen. Given Cypress is intended for testing what the user sees on screen, rather than what's in the HTML source, I assume I'm doing this wrong 😀 How can I test what's actually displayed on the screen when line-clamp is used? I've had to change vue-snip to using JavaScript rather than CSS for truncation, but I'd rather use CSS… — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.