Certain elements of my web page should never wrap their inner text onto multiple lines, no matter how narrow the browser window is. I would like to know how to write a test to check that the inner text of an element has not wrapped onto multiple lines.
My Minimal Reproducible Example
PageToTest.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page to test</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<h1>Page to test</h1>
<div class="row">
<div id="menu" class="col-lg-1 col-md-2 col-sm-3">
<div>Menu option 1</div>
<div>Menu option 2</div>
<div>Menu option 3</div>
<div>Menu option 4</div>
<div>Menu option 5</div>
</div>
<div id="content" class="col-lg-11 col-md-10 col-sm-9">
<!-- some random text from https://www.lipsum.com just to take up horizontal space -->
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque consequat ligula turpis, sit amet luctus neque iaculis a. Nunc consectetur nulla ut sapien pellentesque, quis lobortis odio imperdiet. Maecenas mollis tortor non nulla malesuada dictum. Quisque ultricies a sem at fermentum. Aenean risus lorem, sodales vitae porta non, pharetra a velit. Vivamus semper elit vitae massa pellentesque, ut viverra enim mollis. Fusce at odio vulputate, suscipit arcu vel, imperdiet mauris. Ut at posuere est. Proin consequat quis nisl ut lobortis. Curabitur quam lacus, dictum at leo volutpat, maximus aliquet eros. Fusce tincidunt tristique purus in suscipit. Aliquam at scelerisque ante, sit amet iaculis metus. Aenean feugiat tellus ipsum, a sodales dolor commodo eget. Phasellus eu bibendum leo, in pulvinar justo.</div>
<div>Integer semper laoreet libero non hendrerit. Nullam id dui consequat neque suscipit tristique mattis nec libero. Donec vestibulum pharetra varius. Aliquam erat volutpat. Phasellus ac diam nisi. Suspendisse bibendum, elit eu ultrices porttitor, orci mauris maximus lorem, sed rutrum lacus nisi feugiat elit. Aliquam erat volutpat. Vivamus vulputate varius tellus in tempor. Maecenas pretium felis quis nisi dictum, ut pulvinar sapien vestibulum. Ut in scelerisque est, id dapibus lorem. Nullam consectetur mauris et finibus porta. Etiam interdum venenatis sem vitae gravida. Donec porta tellus risus, et hendrerit arcu mattis nec.</div>
<div>Curabitur gravida fringilla neque nec eleifend. Suspendisse nisi est, mollis vitae fringilla in, lobortis a tellus. Sed feugiat ex vel nibh laoreet gravida. Curabitur quis malesuada tortor. In dictum condimentum volutpat. Quisque ultrices mauris et sollicitudin rhoncus. Praesent non mauris sed est eleifend interdum eget et mauris. Mauris vitae sollicitudin neque.</div>
<div>Duis ut nulla dignissim, dictum lectus ut, vehicula orci. Curabitur tincidunt imperdiet magna. Pellentesque et nulla id nunc malesuada suscipit. Vivamus ultrices, nunc quis consequat faucibus, est augue vehicula ligula, nec sodales elit elit vel tortor. Suspendisse ac neque accumsan, consequat augue sed, dignissim nibh. Duis nisl massa, semper vitae blandit id, vestibulum eget orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec leo massa, suscipit ut sodales in, auctor sit amet ex.</div>
<div>Nam magna libero, varius ac dui id, finibus faucibus mauris. Maecenas mattis tincidunt tortor, quis ultricies elit efficitur sed. Cras a turpis sit amet dolor volutpat pellentesque at sed leo. Aliquam quis varius eros, vel tristique dolor. Nunc sit amet urna volutpat, accumsan nunc et, mattis enim. Sed vehicula blandit sollicitudin. Mauris consequat sem ut efficitur lacinia. Cras at diam et ipsum feugiat lacinia sed sed mauris. Nullam dignissim neque vitae interdum mattis. Vestibulum sollicitudin ex ex, vitae cursus nisi dapibus eget. Pellentesque bibendum commodo pretium.</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
crossorigin="anonymous"></script>
</body>
</html>
What's wrong?
As I reduce the width of the browser window, the text of the menu items down the left hand side start to wrap onto multiple lines, changing from ...
Menu option 1
... to ...
Menu option
1
... to ...
Menu
option 1
... and eventually ...
Menu
option
1
... until Bootstrap steps in and stacks #menu above #content.
I don't want the text of those menu items to wrap, I want the column they're contained in to grow so that it's always wide enough to display them without wrapping. Or maybe the font size could shrink, or maybe the whole menu could hide itself when the browser window isn't wide enough to display both the menu and the content, or some other solution.
But my question isn't about how to stop the text from wrapping, but how to write a test to check whether or not it's wrapping.
What I've tried
Feature file
(I'm using SpecFlow in this project, but it's not really a SpecFlow question)
Feature: PageToTest
@tag1
Scenario Outline: Left hand menu does not word wrap
Given I am on the page to test
When I resize the browser width to <pixels> pixels
Then The text in the left hand menu does not wrap onto multiple lines
Examples:
| pixels |
| 1920 |
| 1900 |
| 1800 |
| 1700 |
| 1600 |
| 1500 |
| 1400 |
| 1300 |
| 1200 |
| 1100 |
| 1000 |
| 900 |
| 800 |
| 700 |
| 600 |
| 500 |
| 400 |
Step definitions / hooks
using System.Drawing;
using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;
using TechTalk.SpecFlow;
[Binding]
public class TestSteps
{
private readonly IWebDriver driver = new ChromeDriver();
[Given(@"I am on the page to test")]
public void GivenIAmOnThePageToTest()
{
// The HTML file is in my test project's root folder with
// "Copy to output directory" set to "always"
var url = $"file://{Directory.GetCurrentDirectory()}/PageToTest.html";
this.driver.Navigate().GoToUrl(url);
}
[When(@"I resize the browser width to (.*) pixels")]
public void WhenIResizeTheBrowserWidthToPixelsPixels(int width)
{
var currentSize = this.driver.Manage().Window.Size;
this.driver.Manage().Window.Size = new Size(width, currentSize.Height);
}
[Then(@"The text in the left hand menu does not wrap onto multiple lines")]
public void ThenTheTextInTheLeftHandMenuDoesNotWrapOntoMultipleLines()
{
var menuOptions = this.driver.FindElements(By.CssSelector("#menu div"));
foreach (var menuOption in menuOptions)
{
// This doesn't build, but hopefully you understand what I'm after
// Assert.False(menuOption.InnerTextHasWrappedOntoMultipleLines);
}
}
[AfterScenario]
public void AfterScenario()
{
if (this.driver != null)
{
this.driver.Quit();
this.driver.Dispose();
}
}
}
The logic for launching the browser, navigating to the page, and setting the browser window width to the desired number of pixels all seems to be working fine. But I'm at a loss as to how to implement the ThenTheTextInTheLeftHandMenuDoesNotWrapOntoMultipleLines method. IWebElement doesn't have a InnerTextHasWrappedOntoMultipleLines property, nor any other property or method which does what I'm looking for, as far as I can tell from the documentation. I'm hoping that there's a type that I can cast IWebElement to which has such a property or method, or maybe a package with an extension method which does this. Or maybe Selenium offers another way of achieving this which I just haven't thought of.