Update 2016 - five years on there are now new methods in the specs (see support below) to convert between strings and typed arrays using proper encoding.

TextEncoder

The TextEncoder represents:

The TextEncoder interface represents an encoder for a specific method, that is a specific character encoding, like utf-8, iso-8859-2, koi8, cp1261, gbk, ... An encoder takes a stream of code points as input and emits a stream of bytes.

Change note since the above was written: (ibid.)

Note: Firefox, Chrome and Opera used to have support for encoding types other than utf-8 (such as utf-16, iso-8859-2, koi8, cp1261, and gbk). As of Firefox 48 [...], Chrome 54 [...] and Opera 41, no other encoding types are available other than utf-8, in order to match the spec.*

*) Updated specs (W3) and here (whatwg).

After creating an instance of the TextEncoder it will take a string and encode it using a given encoding parameter:

if (!("TextEncoder" in window)) 
  alert("Sorry, this browser does not support TextEncoder...");

var enc = new TextEncoder(); // always utf-8
console.log(enc.encode("This is a string converted to a Uint8Array"));

You then of course use the .buffer parameter on the resulting Uint8Array to convert the underlaying ArrayBuffer to a different view if needed.

Just make sure that the characters in the string adhere to the encoding schema, for example, if you use characters outside the UTF-8 range in the example they will be encoded to two bytes instead of one.

For general use you would use UTF-16 encoding for things like localStorage.

TextDecoder

Likewise, the opposite process uses the TextDecoder:

The TextDecoder interface represents a decoder for a specific method, that is a specific character encoding, like utf-8, iso-8859-2, koi8, cp1261, gbk, ... A decoder takes a stream of bytes as input and emits a stream of code points.

All available decoding types can be found here.

if (!("TextDecoder" in window))
  alert("Sorry, this browser does not support TextDecoder...");

var enc = new TextDecoder("utf-8");
var arr = new Uint8Array([84,104,105,115,32,105,115,32,97,32,85,105,110,116,
                          56,65,114,114,97,121,32,99,111,110,118,101,114,116,
                          101,100,32,116,111,32,97,32,115,116,114,105,110,103]);
console.log(enc.decode(arr));

The MDN StringView library

An alternative to these is to use the StringView library (licensed as lgpl-3.0) which goal is:

• to create a C-like interface for strings (i.e., an array of character codes — an ArrayBufferView in JavaScript) based upon the JavaScript ArrayBuffer interface
• to create a highly extensible library that anyone can extend by adding methods to the object StringView.prototype
• to create a collection of methods for such string-like objects (since now: stringViews) which work strictly on arrays of numbers rather than on creating new immutable JavaScript strings
• to work with Unicode encodings other than JavaScript's default UTF-16 DOMStrings

giving much more flexibility. However, it would require us to link to or embed this library while TextEncoder/TextDecoder is being built-in in modern browsers.

Support

As of July/2018:

TextEncoder (Experimental, On Standard Track)

 Chrome    | Edge      | Firefox   | IE        | Opera     | Safari
 ----------|-----------|-----------|-----------|-----------|-----------
     38    |     ?     |    19°    |     -     |     25    |     -

 Chrome/A  | Edge/mob  | Firefox/A | Opera/A   |Safari/iOS | Webview/A
 ----------|-----------|-----------|-----------|-----------|-----------
     38    |     ?     |    19°    |     ?     |     -     |     38

°) 18: Firefox 18 implemented an earlier and slightly different version
of the specification.

WEB WORKER SUPPORT:

Experimental, On Standard Track

 Chrome    | Edge      | Firefox   | IE        | Opera     | Safari
 ----------|-----------|-----------|-----------|-----------|-----------
     38    |     ?     |     20    |     -     |     25    |     -

 Chrome/A  | Edge/mob  | Firefox/A | Opera/A   |Safari/iOS | Webview/A
 ----------|-----------|-----------|-----------|-----------|-----------
     38    |     ?     |     20    |     ?     |     -     |     38

Data from MDN - `npm i -g mdncomp` by epistemex

You can use Cypress Custom Commands to write reusable commands.

Go to cypress/support/commands.js and write your reusable commands like:

Cypress.Commands.add('loginSuccess', (username, password) => {
   cy.get('#username').type(username)
   cy.get('#password').type(password)
   cy.get('.btn').click()
})

Cypress.Commands.add('loginFail', (username, password) => {
   cy.get('#username').type(username)
   cy.get('#password').type(password)
   cy.get('.btn').click()
})

And then you can use this in any tests like for example in clientCreation.js -

describe('Client Creation Test Suite', function() {
   beforeEach(() => {
      cy.visit('/login')
   })
   it('Check the user can create a client', function() {
      //test code
      cy.loginSuccess('admin', 'Qwerty@123')
   })
   it('Check the client creation validation', function() {
      //test code
      cy.loginFail('invalid', 'invalid')
   })
})

There is an example in the Cypress Real World App, a payment application to demonstrate real-world usage of Cypress testing methods, patterns, and workflows

There are 3 transaction feeds and each are tested thoroughly in this spec: https://github.com/cypress-io/cypress-realworld-app/blob/develop/cypress/tests/ui/transaction-feeds.spec.ts

I had the exact same problem and found @Richard Matsen's answer very useful, however when using the whitelist option it isn't possible to access proxy.request, which returns undefined. But if you use onRequest instead of whitelist, you can access the request and thus implement any action depending on that request's body.

So this should work:

cy.server({
  onRequest: (xhr) => {
    xhr.url = xhr.url + 
      xhr.request.body.action  == 'CARD_TRANSACTION_HISTORY' ? '?transactionHistory'
      : xhr.request.body.action  == 'CARD_BALANCE' ? '?balance'
      : xhr.request.body.action  == 'CURRENCY_RATES' ? '?currencyRates'
      : ''
  }
})

To expand on @JosePita's idea, you can set up glob patterns in scripts (package.json) and by-pass the multitude config files he was concerned about.

For example, these work on my system,

"scripts": {
  "cy:open": "cypress open",                              // all files
  "cy:user": "cypress open -c testFiles=user/**/*",       // just the user folder
  "cy:error": "cypress open -c testFiles=**/*error*.js",  // files with keyword 'error'

There's a search bar at the top of the Cypress runner, where the tests are listed, but search is all it does.

Pressing the Run all specs button runs the full set regardless of search results.

If you want to run a subset, specify the testFiles config option on the command line.

The cleanest way is using cy.each()

const order = ['130', '100' , '1']

cy.get('[data-object-type="playlists"]').each(($el, index) => {
  expect($el.attr('data-object-id')).to.eq(order[index])
})

where $el.attr('data-object-id') uses jQuery to extract the id attribute.

An equivalent using .invoke() would be

const order = ['130', '100' , '1']

cy.get('[data-object-type="playlists"]').each(($el, index) => {
  cy.wrap($el)
    .invoke('attr', 'data-object-id')
    .should('eq', order[index])
})

This has the advantage that .should() uses retry if the table is loaded asynchronously.

From comments, shadow DOM is present. You can access elements within it either by adding this to cypress.json

{
  "includeShadowDom": true
}

or in the test

cy.get('widgets-bms-scoreboard')
  .shadow()
  .find('.dropdown-arrow').click()

This is sadly currently not supported with cy.server.

The issue is being tracked here : https://github.com/cypress-io/cypress/issues/521

Workaround

Use standard javascript mocking. You can run this mocks in tests by using cypress onBeforeLoad, mentioned a few times in the linked issue. Its not pretty. Hopefully cypress gets native support in cy.server.

Using invoke('val') instead of invoke('text') worked for my case.

Reminder of the html tag

<input type="text" class="form-control" name="email">

Cypress code

cy.get('input[name="email"]')
  .invoke('val')
  .then(sometext => cy.log(sometext));