How can I access localStorage of Cordova App via WebdriverIO and Appium?

Question

I'm currently trying to write some automated tests for our cordova app written in Angular. My current setup is the following:

Versions:

appium: 1.7.2
wdio-appium-service: 0.2.3
webdriverio: 4.11.0

wdio.conf.js

exports.config = {
  port: 4723,
  logLevel: 'error',
  capabilities: [{
    platformName: 'Android',
    platformVersion: '8.1',
    deviceName: 'any',
    app: '../cordova_app/platforms/android/app/build/outputs/apk/debug/app-debug.apk',
    autoWebview: true,
    autoGrantPermissions: true
  }],
  // specs: ['./tests/spec/**/*.js'],
  specs: ['./tests/spec/login.js'],
  services: ['appium'],
  reporters: ['spec'],
  framework: 'jasmine',
  jasmineNodeOpts: {
    defaultTimeoutInterval: 90000
  }
}

tests/spec/login.js

describe('Language and market choosing process', () => {
    beforeEach(() => {
        browser.timeouts('implicit', 2000);
    });
    afterEach(() => {
        browser.reload();
    });

    it('should go through login process', () => {

        const selectCountryBtn = $('.fsr-login__market-chooser');
        selectCountryBtn.click();
        // everything works so far

        browser.localStorage('POST', {key: 'test', value: 'test123'}); 
        // Failed: unknown error: call function result missing 'value'
    });
});

When I run this test on my Android 8.1 emulator, the test crashes as soon as it reaches the localstorage part with the error:

Failed: unknown error: call function result missing "value"
Error: An unknown server-side error occurred while processing the command.
at localStorage("POST", [object Object]) - index.js:316:3

The localStorage API of WebdriverIO is described here

What am I doing wrong?

Answer 1

I agree that localStorage manipulation is a tricky endeavour to tackle, especially cross-browser, cross-platform, etc. When dealing with application cookies, or local storage, I default to using plain JS commands to achieve my goal.

As such, I would recommend you try the browser.execute() command to manipulate the browser's local storage:

browser.execute("localStorage.setItem('socialMediaRuinsTheWorld', true)");

or

browser.execute((keyName, keyValue) => { 
  localStorage.setItem(keyName, keyValue); 
}, "testing", "theLocalStorage");

Outcome: