Logo: Relish

  1. Sign in

Project: Test

Responsive app for multiple screen sizes in Chrome

  • @chrome

As a reader on a Chrome browser
I want a responsive page to match my screen size
so that I can have a good reading experience

Scenarios
  • @responsive
- An article loads on multiple desktop browsers at multiple resolutions
Given
I am using a typeOfBrowser browser
When
I open a browser window of size width by height
And
I navigate to an article page
Then
the article elements are displayed
And
the article elements are rendered within the page boundaries
And
The Pearson logo is displayed correctly
Examples:
typeOfBrowser width height
chrome 500 800
chrome 640 800
chrome 1024 800
chrome 1600 800
  • @responsive
- An article page, viewed on a desktop browser, responds to window resizing
Given
I am using a typeOfBrowser browser
When
I open a browser window of size width by height
And
I navigate to an article page
And
I change the browser size to width2 by height2
Then
the article elements are displayed
And
the article elements are rendered within the page boundaries
And
The Pearson logo is displayed correctly
Examples:
typeOfBrowser width height width2 height2
chrome 599 800 600 800
chrome 600 599 599 800
chrome 899 900 900 800
chrome 900 899 899 800
chrome 1399 1400 1400 800
chrome 1400 1399 1399 800
  • @responsive
- An article page, viewed on a desktop browser, when changed from small to medium view, responds appropriately
Given
I am using a typeOfBrowser browser
When
I make the browser a small size
And
I navigate to an article page
Then
The footer links are in 2 columns
And
the article elements are displayed
And
the article elements are rendered within the page boundaries
And
The Pearson logo is displayed correctly
And
the footer is spaced 10 pixels from the story list
And
I make the browser a medium size
Then
The footer links are in 2 columns
And
the article elements are displayed
And
the article elements are rendered within the page boundaries
And
The Pearson logo is displayed correctly
Examples:
typeOfBrowser
chrome
  • @responsive
- An article page, viewed on a desktop browser, when changed from medium to small view, responds appropriately
Given
I am using a typeOfBrowser browser
When
I make the browser a medium size
And
I navigate to an article page
Then
The footer links are in 2 columns
And
the article elements are displayed
And
the article elements are rendered within the page boundaries
And
The Pearson logo is displayed correctly
And
I make the browser a small size
Then
The footer links are in 2 columns
And
the article elements are displayed
And
the article elements are rendered within the page boundaries
And
The Pearson logo is displayed correctly
And
the footer is spaced 10 pixels from the story list
Examples:
typeOfBrowser
chrome
  • @responsive
- An article page, viewed on a desktop browser, when changed from medium to large view, responds appropriately
Given
I am using a typeOfBrowser browser
When
I make the browser a medium size
And
I navigate to an article page
Then
The footer links are in 2 columns
And
the article elements are displayed
And
the article elements are rendered within the page boundaries
And
The Pearson logo is displayed correctly
And
I make the browser a large size
Then
The footer links are in a single row
And
the article elements are displayed
And
the article elements are rendered within the page boundaries
And
The Pearson logo is displayed correctly
Examples:
typeOfBrowser
chrome
  • @responsive
- An article page, viewed on a desktop browser, when changed from large to medium view, responds appropriately
Given
I am using a typeOfBrowser browser
When
I make the browser a large size
And
I navigate to an article page
Then
The footer links are in a single row
And
the article elements are rendered within the page boundaries
And
The Pearson logo is displayed correctly
And
I make the browser a medium size
Then
The footer links are in 2 columns
And
the article elements are displayed
And
the article elements are rendered within the page boundaries
And
The Pearson logo is displayed correctly
Examples:
typeOfBrowser
chrome
  • @responsive
- An article page, viewed on a desktop browser, when changed from large to extra large view, responds appropriately
Given
I am using a typeOfBrowser browser
When
I make the browser a large size
And
I navigate to an article page
Then
The footer links are in a single row
And
the article elements are displayed
And
the article elements are rendered within the page boundaries
And
The Pearson logo is displayed correctly
And
I make the browser an extra large size
Then
The footer links are in a single row
And
the article elements are displayed
And
the article elements are rendered within the page boundaries
And
The Pearson logo is displayed correctly
Examples:
typeOfBrowser
chrome
  • @responsive
- An article page, viewed on a desktop browser, when changed from extra large to large view, responds appropriately
Given
I am using a typeOfBrowser browser
When
I make the browser an extra large size
And
I navigate to an article page
Then
The footer links are in a single row
And
the article elements are displayed
And
the article elements are rendered within the page boundaries
And
The Pearson logo is displayed correctly
And
I make the browser a large size
Then
The footer links are in a single row
And
the article elements are displayed
And
the article elements are rendered within the page boundaries
And
The Pearson logo is displayed correctly
Examples:
typeOfBrowser
chrome

Last published over 5 years ago by HarrySpriggs.