Giter Club home page Giter Club logo

utam-js-recipes's Introduction

UTAM JavaScript Recipes

This repository contains examples of how to test the Salesforce UI using the UTAM framework.

Note

This repository uses UTAM JavaScript. If you want to use UTAM with Java, visit the UTAM Java recipes repository.

Note

These recipes are designed to work with a generic Salesforce org. If your org has customizations, you might need to modify page objects or tests locally to avoid errors.

Important

This repository's page objects and UI tests are compatible with the Salesforce Spring'24 release.

Project structure

This repository contains two npm packages. Both packages demonstrate how to set up page object authoring and compilation.

1) utam-js-recipes package (project root)

This package contains:

  • Custom components that can be deployed to a scratch org
  • Page objects associated with those custom components
  • UI tests
  • Scripts that ease the initial setup

Here's an outline of the directory structure and few of the important configuration files.

├── force-app // contains JSON page objects and tests
├── pageObjects (created after build)
├── package.json
├── utam.config.js
└── wdio.conf.js

The repo has a hello Lightning web component. The JSON page object is in a __utam__ folder beside the component source.

├── lwc
    ├── hello
         ├── hello.html
         ├── hello.js
         ├── hello.js-meta.xml
         └── __utam__
             └── hello.utam.json

2) utam-preview package

This package contains the page objects used in the UI tests that interact with the Salesforce UI.

Both packages demonstrate how to setup page objects authoring and compilation.

Requirements

Initial setup

1) Clone the repository

Clone the utam-js-recipes repository:

$ git clone [email protected]:salesforce/utam-js-recipes.git
$ cd utam-js-recipes

2) Install dependencies

$ yarn install

3) Build the project

Execute yarn build to generate page objects:

$ yarn build

There are two types of tests in this project:

  1. The first test (force-app/test/crud.spec.js) loads a provided URL and logs in through the standard login page before beginning the test.
  2. The other test (force-app/test/sfdx-scratch-org.spec.js) runs against the custom app and components in this project by loading the app in a scratch org.

Both tests demonstrate how UTAM can be used to author and compile page objects, and how to integrate the UTAM runtime with WebdriverIO.

Dependency for Salesforce page objects

The package.json file contains a dependency for the salesforce-pageobjects package, which contains page objects from Salesforce. The package is available on npm.

Set up Salesforce Web UI tests

1) Create a .env file

We use a .env file to contain the URL and authentication credentials for test environments that we use.

Note

Do not commit your .env files. Those files contain sensitive credentials. The repository is set up so that we don't track those files by default.

Create a .env file by executing:

$ yarn create:env

This script creates a .env file located at the project root.

2) Configure your test environment variables

Open the .env file created during the previous step and configure your test environment credentials.

Here's a .env file that references a SANDBOX test environment. Each variable for the test environment starts with the test environment name followed by an underscore.

# Required variables
SANDBOX_URL=https://sandbox.salesforce.com/
[email protected]
SANDBOX_PASSWORD=strongPassword

# Optional variables
# sometimes after login URL changes
SANDBOX_REDIRECT_URL=https://lightningapp.lightning.test1234.salesforce.com/

# Used in force-app/test/record-update.spec.js
SANDBOX_ACCOUNT_ID=accountId
SANDBOX_CONTACT_ID=contactId

Replace SANDBOX with your test environment name.

A test references a test environment name in a call to the TestEnvironment constructor. For example:

const TEST_ENVIRONMENT_PREFIX = 'sandbox';
const testEnvironment = new TestEnvironment(TEST_ENVIRONMENT_PREFIX);

The environment name must be all uppercase in the .env file but the name is case insensitive in the JavaScript code. The environment name of sandbox in the test code matches the uppercase SANDBOX name in the .env file. A camel case environment name of sandboxOrg in the test code would match an uppercase SANDBOX_ORG name in the .env file.

Note

Add as many test environments as needed in your .env file. Just duplicate the variables and adjust the prefix and the values.

Alternatively, if you don't want to configure a .env file, you can prefix the test command with environment variables:

$ SANDBOX_URL=my-sandbox.com [email protected] SANDBOX_PASSWORD=password yarn test --spec force-app/test/record-*.spec.js

3) Update the Web UI tests

Open the Web UI test files located in:

  • force-app/test/record-create.spec.js
  • force-app/test/record-update.spec.js

For each test file, update the value of the TEST_ENVIRONMENT_PREFIX global variable located after the import statements:

// Assuming your test environment is sandbox (must match the prefix used in the .env file)
const TEST_ENVIRONMENT_PREFIX = 'sandbox';

For the force-app/test/record-update.spec.js file, update your .env file with the account and contact IDs of your test environment. That's how it looks like for an environment named sandbox:

SANDBOX_ACCOUNT_ID=XXXXXXXXXXXXXXXXXX
SANDBOX_CONTACT_ID=XXXXXXXXXXXXXXXXXX

Setup SFDX scratch org test

Prerequisites

Follow the steps in the Quick Start: Lightning Web Components Trailhead project. The steps include:

  • Enable Dev Hub in your Trailhead Playground
  • Install Salesforce CLI
  • (Optional) Install Visual Studio Code
  • (Optional) Install the Visual Studio Code Salesforce extensions, including the Lightning Web Components extension

Org Setup

  1. If you haven't already done so, authorize your hub org and provide it with an alias (myhuborg in the command below). Use the login credentials generated from your Trailhead Playground in the Prerequisites section above or your own Developer Edition org if you prefer:

    $ sfdx auth:web:login -d -a myhuborg
  2. Create a scratch org and provide it with an alias (utam-js-recipes in the command below):

    $ sfdx force:org:create -s -f config/project-scratch-def.json -a utam-js-recipes

Note

If this step throws an error ERROR running force:org:create: You do not have access to the [ScratchOrgInfo] object, you must enable Dev Hub. To enable Dev Hub:

  1. Log in to the org you authenticated against during step 1 in a web browser.
  2. Click on the Setup icon in the upper right corner.
  3. Click Setup.
  4. Search for dev hub using the quick find search box on the left pane.
  5. Click on the Dev Hub item under Development.
  6. Click on the Enable Dev Hub toggle.
  7. Create a scratch org using the sfdx force:org:create command mentioned previously
  1. Push the app to your scratch org:

    $ sfdx force:source:push
  2. Assign the utam permission set to the default user:

    $ sfdx force:user:permset:assign -n utam

Note

If this step throws an error Permission set not found in target org, run sfdx plugins:install user and repeat from step 3

  1. Open the scratch org:

    $ sfdx force:org:open

If you need to recreate a scratch org:

  • find created org sfdx force:org:list --all
  • delete previously created org with sfdx force:org:delete. It will prompt you to delete the org from the list, or specify an org alias or email sfdx force:org:delete -u utam-js-recipes
  • recreate scratch orgs (repeat steps starting from step 3)

Running UI tests

Execute all tests at once by running:

$ yarn test

This command runs all UI tests in the repository, namely all tests in force-app/test/ folder.

Run the Web UI test

These tests require login credentials to an existing org. Make sure that your test environment is set up as described in Set up Salesforce Web UI tests.

Run the Web UI tests against the environment you configured:

$ yarn test --spec force-app/test/record-create.spec.js
$ yarn test --spec force-app/test/record-update.spec.js

To run all tests related to records, run:

$ yarn test --spec force-app/test/record-*.spec.js

Note

CRUD tests will modify real records in the org so only sandbox or development-specific orgs should be used.

Run the local app in a scratch org test

These tests run under the assumption that the initial URL loaded contains an access token so no manual login is required. To generate such a URL, follow the Org Setup steps above and then run:

$ yarn generate:login

This command runs the sfdx command below and adds the generated URL to the .env file in the root of this project.

$ sfdx force:org:open -p /lightning -r

Finally, run tests:

$ yarn test --spec force-app/test/sfdx-scratch-org.spec.js

Run the test against the UTAM doc site

The repository contains a test against utam.dev. The test doesn't require any special setup. The instructions to run it are inside the test.

Run Salesforce Mobile test

  • There are two sample tests under force-app/test/mobile: navigation.spec.js is against Community playground application and login.spec.js is against Salelsforce application.
  • Follow the instructions at Get Started for Mobile to set up your local simulator/emulator.
  • Make sure that Appium and node.js are installed on your machine.
  • Update the wdio configuration file: For an iOS test, update wdio.conf.xx.ios.js ((wdio.conf.sapp.ios.js is for test against Salesforce App, and wdio.conf.mpcc.ios.js is for test against Community Playground App) file to configure the test device name(appium:deviceName), iOS version(appium:platformVersion), and the full path for the test application(appium:app):
'appium:deviceName': 'iPhone 12',
'appium:app': '<path to iOS test app>',
'appium:platformVersion': '15.2',

For an Android test, update the wdio.conf.xx.android.js (wdio.conf.sapp.android.js is for test against Salesforce App, and wdio.conf.mpcc.android.js is for test against Community Playground App) file to configure the test device name(appium:deviceName) and the full path for the test application(appium:app):

'appium:deviceName': 'emulator-5554',
'appium:app': '<path to Android test app>',
  • Download the Salesforce application Build and Community playground application build for the Salesforce iOS and Android mobile application debug builds.
  • Commands to execute a test: For iOS: yarn test wdio.conf.xx.ios.js (wdio.conf.sapp.ios.js is for test against Salesforce App, and wdio.conf.mpcc.ios.js is for test against Community Playground App) For Android: yarn test wdio.conf.xx.android.js (wdio.conf.sapp.android.js is for test against Salesforce App, and wdio.conf.mpcc.android.js is for test against Community Playground App)
  • For a test on Android, make sure to start an emulator before the test run. Otherwise, you will get an error like this: "Error: Failed to create session. An unknown server-side error occurred while processing the command. Original error: Could not find a connected Android device in 20190ms.".
  • Install the appropriate version of chromedriver based on the instructions on this site.

utam-js-recipes's People

Contributors

adamtreineke avatar chasf62 avatar dependabot[bot] avatar helenren avatar jasonschroeder-sfdc avatar kartikperumal avatar lizaiv77 avatar mleonardsfdc avatar nancyheiss avatar olivier-martin-sf avatar pozil avatar svc-scm avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

utam-js-recipes's Issues

[Bug] - salesforce-pageobjects case sensitive error

Actual behavior

Importing module salesforce-pageobjects/global/pageObjects/recordActionWrapper cause a module not found error on case sensitive file system (Linux)

  • Unable to compile a Page Object
  • Invalid generated code
  • Runtime error

What is your expected behavior?

All salesforce-pageobjects modules to follow the same camel case and case sensitivity convention

Steps to reproduce

Run test record-create.spec.js using import RecordActionWrapper from 'salesforce-pageobjects/global/pageObjects/recordActionWrapper'; on case sensitive file system.

Error in Error: cannot find module "node_modules/salesforce-pageobjects/force/pageobjects/changeRecordTypeFooter" because module is in salesforce-pageobjects/force/pageObjects/changeRecordTypeFooter (pageObjects folder instead of pageobjects)

Environment

  • Failing test [e.g force-app/test/record-create.spec.js]
  • Node.js: 14.19.3
  • OS: Amazon Linux 2
  • Browser: chrome
  • Browser Version: 103

Additional context

[Bug] Incomplete jasmine stack-trace in case of utam method caused a test failure

Actual behavior

Hey everyone, we're working with utam-webdriver-jasmine flavors along with TS and during spec run we have noticed the stack trace get truncated if a test failed because of web-element issue [utam waitfor- method or element is not in scope],
in-short we got a complete stack trace in case of assertion failure like which spec line and file, but other failures wont populate complete stack-traces & the error source,

  • Unable to compile a Page Object
  • Invalid generated code
  • Runtime error

What is your expected behavior?

during any failure, the complete stack-trace should be visible indicating the spec line which actually caused this issue

Steps to reproduce

1: Create a TS-Jasmine-utam-wdio based project
2: Create few utam files with wait for methods that will fail or some non-existing locators
3: Draft spec file and use utam file and called specific methods or access locators stated in step2
4: Run the spec and observe the stack traces

Environment

  • Node.js: v16.18.1
  • OS: Windows
  • Browser: Chrome
  • Browser Version: Latest
  • Type script
    • typescript: "^4.8.3",
  • Jasmine
    • @wdio/jasmine-framework: "^7.24.1",

Additional context

Refer to attached truncated stack-traces
1:
locator_

2:

waitfor

[Bug] recordHomeFlexipage2 not visible in navexConsoleTabset

Actual behavior

recordHomeFlexipage2 object not visible when inside a tabset

  • Unable to compile a Page Object
  • Invalid generated code
  • Runtime error

What is your expected behavior?

When nested in navexConsoleTabset, a recordHomeFlexipage2 object should be reachable

Steps to reproduce

Record (recordHomeFlexipage2 object) nested in tabSet:
Screenshot at 2022-10-27 09-09-19

import Flexipage from "salesforce-pageobjects/global/pageObjects/recordHomeFlexipage2";

const flexiPage = await utam.load(Flexipage);
await flexiPage.waitForVisible();
const tabSet = await flexiPage.getTabset();
await (await tabSet.getTabBar()).clickTab("Details");

Returns timeout error even thought the page and record are displayed. So a step to select active content is missing?
Error: waitForVisible method did not complete within timeout 10000ms.

Environment

  • Node.js: 14.19.3
  • OS: linux
  • Browser: chrome
  • Browser Version: 105

Additional context

Invalid options being passed to WDIO Jasmine adapter

According to the official WDIO Jasmine adapter docs, Jasmine options can be passed with a jasmineOpts property:

jasmineOpts: {
    defaultTimeoutInterval: 10000
}

However, the recipes' wdio.conf.js config uses a jasmineNodeOpts property:

jasmineNodeOpts: {
    // max execution time for a script, set to 5 min
    defaultTimeoutInterval: 1000 * 60 * 5,
    // Temporary workaround to get babel to work in wdio tests
    helpers: [path.resolve(process.cwd(), 'wdioJasmineHelper.js')],
}

This means that the timeout and custom helper settings defined in this file are ignored.
We can either remove these options or rename the configuration key to jasmineOpts but the helper doesn't seem to have any effects.

[Bug] Outdated path references in wdio.conf.js

wdio.conf.js contains some outdated path references that trigger warnings when running yarn test:

2021-12-23T11:04:51.069Z WARN @wdio/config:ConfigParser: pattern force-app/**/__wdio__/*.spec.js did not match any file
2021-12-23T11:04:51.079Z WARN @wdio/config:ConfigParser: pattern force-app/test/dreamforce.spec.js did not match any file

[Bug] Issue building project

Actual behavior

`$ yarn generate:utam
yarn run v1.22.5
$ cd utam-generator && yarn generate && yarn compile
$ utam-generate -c generator.config.json
Generating from C:\Users\manjpura\Desktop\UTAM\utam-js-recipes\utam-generator\src\cards\button.html...[DONE]
Generating from C:\Users\manjpura\Desktop\UTAM\utam-js-recipes\utam-generator\src\cards\icon.html...[DONE]
Generating from C:\Users\manjpura\Desktop\UTAM\utam-js-recipes\utam-generator\src\cards\image.html using rules from image.rules.json...[DONE]
Generating from C:\Users\manjpura\Desktop\UTAM\utam-js-recipes\utam-generator\src\cards\text.html...[DONE]
$ utam -c compiler.config.json
Compiling generated/button.utam.json... C:\Users\manjpura\Desktop\UTAM\utam-js-recipes\node_modules\utam\build\run_utam.js:209
throw new UtamCompilerError(error.toString(entryOptions.entry));
^

UtamCompilerError:
Error in page object generated/button.utam.json {"offset":144,"line":7,"column":24}
error 201: element "button": type "utam-lightning/pageObjects\button" is not supported, valid values are: custom, container, frame, actionable, clickable, draggable, editable, touchable;
tip: custom type must only contain alphanumeric characters with the schema [package-name]/[custom/path]/pageObject

at findAndProcessPOsAndUtils (C:\Users\manjpura\Desktop\UTAM\utam-js-recipes\node_modules\utam\build\run_utam.js:209:27)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async runUtam (C:\Users\manjpura\Desktop\UTAM\utam-js-recipes\node_modules\utam\build\run_utam.js:250:9)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.`

  • Unable to compile a Page Object
  • Invalid generated code
  • Runtime error

What is your expected behavior?

Program should build project with no errors and be able to proceed.

Steps to reproduce

  1. Ran yarn install - Worked fine
  2. Ran yarn build - This is where it broke

Environment

  • Failing test [e.g force-app/test/record-create.spec.js]
  • Node.js: [e.g 14.18.2] v16.20.0
  • Yarn: 1.22.5
  • OS: [e.g. iOS] Windows_NT x64 10.0.19044
  • Browser: [e.g. chrome, safari] VSCode

Set up linting for this project

It would be helpful to set up linting in this project so that we automate things like checking the PO imports.

I can do a PR for this if you're interested. Here's the UTAM specific config that I implemented for the E-Bikes sample app.

Can't find element for Record Form

Hi @olivier-martin-sf @lizaiv77

I'm facing below issue while retrieving the Record Form
Can't find element with locator 'records-lwc-detail-panel' inside its scope shadow root within timeout 0ms

I have tried lots of other tricks but no luck. Would be great if you can help me resolve this issue ASAP.

below are the attachments of Record form DOM and Record Form modal.

Issue1

image

Originally posted by @divymuni in #41 (comment)

[Bug] UTAM extension does not show Available Page Objects

Actual behavior

UTAM extension doesn't show any available page object

  • Unable to compile a Page Object
  • Invalid generated code
  • Runtime error

What is your expected behavior?

The extension shows Page Objects from where to select methods

Steps to reproduce

I open the Dev Tools and go to the UTAM tab at the end
Try to find available Page Objects

Environment

  • Failing test: It's a private repo
  • Node.js: v16.14.2
  • OS: IOS
  • Browser: Chrome
  • Browser Version: latest at the post date

Additional context

We are trying to validate the existence of a field inside a RecordPage inside a custom Lightning App
image

How to load your custom RecordPage and expect its custom components?

Actual behavior

I'm implementing a custom Record Page with LWC's. Once I've navigated to any record, I want to assert if a text is inside one of my custom LWC. When I load my custom component BidDetails, its generated methods don't work properly.

BidDetails is a custom component that goes into the header of a Record Page. I want to expect a string value displayed inside the custom component. The .utam.json file was generated using the UTAM generator and the pageObjects compiled with the /utam-preview config file. However, whenever I tried to load the LWC, I would get a Element is required similar error prompt. To solve this I edited the generated file to have the following instead of the shadow property.

// bidDetails.utam.json
{
  "root": true,
  "selector": {
    "css": "body"
  },
  "elements": [
  ...
}
  • Unable to compile a Page Object
  • Invalid generated code
  • Runtime error

What is your expected behavior?

What should I load once I'm on the Record Page? I want to assert the highlighted text
image

Steps to reproduce

This is how I'm navigating to the Record Page. Visually, after the click I'm inside the desired Record Page

    await (
      await (
        await (
          await (
            await (await utam.load(ObjectHome)).getListView()
          ).getListViewContainer(ListViewManagerGrid)
        ).getInlineEditGrid()
      ).getTable()
    ).clickCellSpecialLink(1);

Environment

  • Node.js: v16.14.2
  • OS: IOS

[Bug] Cannot find LWCs with selectors that include an attribute filter

Actual behavior

UTAM is unable to find LWCs with a CSS attribute filter selector like lightning-input[type='search'].
This issue is specific to LWCs, regular elements can be selected with attribute filters.

  • Unable to compile a Page Object
  • Invalid generated code
  • Runtime error

What is your expected behavior?

We should be able to select LWCs with attribute filters like any elements.

Steps to reproduce

Starting from a clean clone of the utam-js-recipes repo, follow these steps:

  1. Edit force-app/main/default/lwc/wireGetObjectInfo/__utam__/wireGetObjectInfo.utam.json and change line 17 to

    "css": "lightning-button[label='Get Object Info']"
    

    Notice the attribute filter that we added to search for a specific label.

  2. Recompile the page objects: yarn build

  3. Run the scratch org tests: yarn test --spec force-app/test/sfdx-scratch-org.spec.js

Notice that the wire test is now failing with this error:

Error: Can't find element with locator 'lightning-button[label='Get Object Info']' inside its scope shadow root within timeout 0ms.

Environment

  • Node.js: v14.15.4
  • OS: macOs X
  • Browser: Chrome
  • Browser Version: v98.0.4758.48

[Bug] getRelatedList() in path: {salesforce-feature-syntax\node_modules\salesforce-pageobjects\lists\pageObjects\relatedListSingleContainer.js} is not returning accurate result

Hi @olivier-martin-sf @futuremint @mgomes @awaterma @ekashida

To iterate over the related list, I used function getRelatedLists() function that returns the relatedlist elements and inside the for loop I've kept a check that if current element is AuraRelatedList or AppBuilderList.
Check is something like this:

if( (await XYZ.getAuraRelatedList) !== null){
continue;
}

Issues:

  1. Even though the iterated related list is of AuraRelatedList, getAuraRelatedList() returning the null instead of returning element thus my check is failing & unable to automate related list functionality. Check my code below:

image

DOM Snapshot:

Screenshot (342)

  1. Below function is throwing an error that waitForAppBuilderListToLoad() is not a function. PATH: salesforce-feature-syntax\node_modules\salesforce-pageobjects\dist\lists\utils\relatedListContainerUtils.js
async getRelatedList(relatedListName) {
        const _result0 = await _getRelatedList({ pageObject: this }, relatedListName)
        return _result0;
    }

[Bug] .clickHeaderSpecialLink() not finding tr th:nth-of-type(n) selector

Actual behavior

Navigating to the 1st record in a standard list view datatable and getting the below error:

image

  • Unable to compile a Page Object
  • Invalid generated code
  • Runtime error

What is your expected behavior?

It should find the special link within a table and proceed to click on it.

image

Steps to reproduce

Navigate yourself to any list view and attempt to click on the first record using the below code snippet produced by UTAM chrome extension:

await (await (await (await (await (await utam.load(ConsoleObjectHome)).getListView()).getListViewContainer(ListViewManagerGrid)).getInlineEditGrid()).getTable()).clickHeaderSpecialLink(1);

or

await (await (await (await utam.load(ConsoleObjectHome)).getListView()).getListViewContainer(VirtualDataTable)).clickHeaderSpecialLink(1);

Environment

  • Node.js: v16.13.1
  • OS: Mac OS
  • Browser: Chrome
  • Browser Version: 109.0.0

Additional context

UTAM chrome extension finds and highlights the special link correctly.

Keen to join the UTAM support slack channel, my email address is: [email protected]

[Bug] _utam_get_decorator locator not updated

Issue

Getting error "Can't find element with locator 'record_flexipage-record-page-decorator."

image

Using _utam_get_decorator function and I have noticed the element locator is incorrect

async function _utam_get_decorator(driver, root) { let _element = await _utam_get_flexipageModule(driver, root); const _locator = core.By.css("record_flexipage-record-page-decorator"); _element = new core.ShadowRoot(driver, _element); return _element.findElement(_locator); }

image

What is your expected behavior?

Element locator should be "record_flexipage-desktop-record-page-decorator" in _utam_get_decorator function

DOM Snapshot:
image

[Feat Request] Introduce session check when running spec

Is your feature request related to a problem? Please describe

When running tests, there's a good change that we either forget to log in or that a session that we obtained earlier has expired.
If this is the case, we are blocked on the login page and the tool performs a series of retries that will lead to an unclear error after timing out.

Describe the solution you'd like

I'm suggesting a solution that I've implemented in the E-Bikes sample app.

Let's save a timestamp when we generate the env file with the login URL:
https://github.com/trailheadapps/ebikes-lwc/blob/main/scripts/generate-login-url.js#L36

In our spec, we then read the timestamp and figure out if if the session has expired:
https://github.com/trailheadapps/ebikes-lwc/blob/main/force-app/test/utam/page-explorer.spec.js#L27

If this is the case, we abort the test with a clear error message.
https://github.com/trailheadapps/ebikes-lwc/blob/main/force-app/test/utam/page-explorer.spec.js#L31

[Bug] Tests against Scratch Org only run successfully if the default user navigates to the UTAM Recipes app

Actual behavior

[] Tests are failing
-Errors are in the attached text file.

What is your expected behavior?

I expected the tests to run successfully.

Steps to reproduce

  • Follow steps under ReadMe.md section: "Run the local app in a scratch org test"
  • Open the scratch org in the browser. (I did not navigate to the UTAM Recipes app)
  • Run "yarn test --spec force-app/test/sfdx-scratch-org.spec.js" from terminal.

UTAM_Test_Output.txt

Environment

  • Failing test [e.g force-app/test/record-create.spec.js]
  • Node.js: v14.15.5
  • OS: OSX
  • Browser: Chrome
  • Browser Version: Version 101.0.4951.64

Additional context

These tests ran successfully after I navigated to the 'UTAM Recipes' app and then re-ran the tests.

[Bug] - recordHomeFlexipage2 not implemented

Actual behavior

Error loading page object from "salesforce-pageobjects/global/pageObjects/recordHomeFlexipage2" in salesforce-pageobjects 2.0.1

  • Unable to compile a Page Object
  • Invalid generated code
  • Runtime error

What is your expected behavior?

import Flexipage from "salesforce-pageobjects/global/pageObjects/recordHomeFlexipage2";
utam.load(FlexiPage2) loads page object and its related methods

Steps to reproduce

npm install [email protected]

import Flexipage from "salesforce-pageobjects/global/pageObjects/recordHomeFlexipage2";
const flexiPage = await utam.load(Flexipage)

Running test containing this statement returns error: Unable to find any valid implementation

Looking at the page object, methods are not implemented:
image

Environment

  • Node.js: v14.19
  • OS: Linux
  • Browser: chrome
  • Browser Version: 105

Getting error while loading RecordHomeFlexipage2 to update Record 'Error: Unable to find any valid implementation'

HI @olivier-martin-sf

Actual behavior

File path: utam-js-recipes/tree/main/force-app/test/record-update.spec.js

I tried updating a record using above file but execution is failing with the error saying 'Unable to find any valid implementation'.
After debugging the error in detail, I found that 'recordHomeFlexipage2' doesn't have method implementation for getHighlights() method which we're using in test script to access the record highlight panel[Line No: 54 in record-update.spec.js].

FYI, recordHomeFlexipage2 is an interface.
So, my question is,
How did you utilize below line in your test script to edit/update record?
Line no: 11 in record-update.spec.js
import RecordHomeFlexipage2 from 'salesforce-pageobjects/global/pageObjects/recordHomeFlexipage2';

What is your expected behavior?

utam-js-recipes/tree/main/force-app/test/record-update.spec.js file should be executed without any error and
should allow me to edit the record.

Steps to reproduce

  • Clone the main repo & do needful steps provided in Readme file
  • Execute this command: yarn test --spec force-app/test/record-update.spec.js
  • execution will fail and prompts an error

Environment

  • Failing test: utam-js-recipes/tree/main/force-app/test/record-update.spec.js
  • Node.js: 16.17.0
  • OS: Windows
  • Browser: Chrome
  • Browser Version: 105.0.5195.127

Additional context

image

[Bug] jasmine 3.6.3 is not compatible with Node 16

Actual behavior

If you have Node.js 16 installed as your default—or if you use Volta it doesn't matter what your default Node version is—yarn install will fail with the following error:

$ yarn install
yarn install v1.22.5
[1/5] 🔍  Validating package.json...
[2/5] 🔍  Resolving packages...
[3/5] 🚚  Fetching packages...
error [email protected]: The engine "node" is incompatible with this module. Expected version "^10 || ^12 || ^14". Got "16.18.1"
error Found incompatible module.

jasmine 3.6.3 is the required dependency version for @wdio/jasmine-framework ^6.11.0. Since the utam-js-recipes project's package.json specifies a node engine >=14.15.4, and a Volta node version of 16.18.1, this presents a fatal incompatibility for users with any version of Node > 14.

Looks like jasmine 3.6.4 specifically removed the engines field from their package.json, citing more problems than it was worth (including the one reported here). Probably time to update to a version of Jasmine that doesn't break for Node > 14. Looks like @wdio/jasmine-framework 7.0.0 was the first version of jasmine-framework to move to jasmine 3.6.4.

What is your expected behavior?

Any version of Node supported in this repo should support a full project install and build.

Steps to reproduce

  • Install Node.js 16.x as your current Node version.
  • Run yarn install from the project root.

Environment

  • Node.js: 16.18.1
  • OS: macOS 12.6.1
  • Browser: N/A
  • Browser Version: N/A

Additional context

None

[Bug]

### Actual behavior

[chrome mac os x #0-0] Spec: /Users/sf-unified/utam-js-recipes/force-app/test/record-create.spec.js
[chrome mac os x #0-0] Running: chrome (v) on mac os x
[chrome mac os x #0-0] Session ID: ec32bc66889e3e30dce609b1d166132c
[chrome mac os x #0-0]
[chrome mac os x #0-0] Record creation tests
[chrome mac os x #0-0] ✖ "before all" hook
[chrome mac os x #0-0] ✖ Create a new Account Record
[chrome mac os x #0-0] ✖ Create a new Opportunity Record
[chrome mac os x #0-0]
[chrome mac os x #0-0] 3 failing (1.4s)
[chrome mac os x #0-0]
[chrome mac os x #0-0] 1) Record creation tests "before all" hook
[chrome mac os x #0-0] An element on the interface of UTAM Element or a Locator must be provided in order to load a PageObject
[chrome mac os x #0-0] Error: An element on the interface of UTAM Element or a Locator must be provided in order to load a PageObject
[chrome mac os x #0-0] at UtamLoader.load (/Users//sf-unified/utam-js-recipes/node_modules/@utam/loader/build/index.js:42:19)
[chrome mac os x #0-0] at login (/Users//sf-unified/utam-js-recipes/force-app/test/utilities/salesforce-test.js:23:30)
[chrome mac os x #0-0] at processTicksAndRejections (internal/process/task_queues.js:93:5)
[chrome mac os x #0-0] at UserContext. (/Users//sf-unified/utam-js-recipes/force-app/test/record-create.spec.js:64:9)
[chrome mac os x #0-0] at UserContext.executeAsync (/Users//sf-unified/utam-js-recipes/node_modules/@wdio/utils/build/shim.js:101:16)
[chrome mac os x #0-0] at UserContext.exports.testFrameworkFnWrapper (/Users//sf-unified/utam-js-recipes/node_modules/@wdio/utils/build/test-framework/testFnWrapper.js:25:18)

### Steps to reproduce

Followed the steps as described in the readme file

### Environment

Sanbox

### Additional context

the Login script seems not working and I think the consequent steps are failing.

Getting error on getRecordForm call

Actual behavior

Configured the project to point against our test environment.
It logs and loads the Account page
Tests passes until selecting New Account
It fails at the getRecordForm
Can't find element with locator 'records-lwc-detail-panel' inside its scope shadow root within timeout 0ms

What is your expected behavior?

It should return all the items from the recordform and recordlayout calls

Steps to reproduce

1.Cloned utam-js-recipes-main
2.Create .env file for the test environment
3.change the const TEST_ENVIRONMENT_PREFIX = 'sandbox' in the record-create.spec.js and .env file
4.Compile and run the test

[Bug] Can not get Field content in dynamic forms

The first field in my dynamic forms is a picklist.

  1. get RecordActionWrapper
  2. get RecordHomeSingleColNoHeaderTemplateDesktop2
  3. get Component2 by Id
  4. get FieldSection2
  5. get Column2 in FieldSection2.
  6. get field by column2.getFieldByID(fieldID).
  7. get picklist in field to set value.

Actual behavior

Something went wrong here

  1. Can not get Column2 from FieldSection2.
let column2List = await fieldSection2.getContent(Column2);
// just 2 Column2 ,but returns 9 elements
  1. and also can not get field by Id.
let field = await column2.getFieldByID(fieldID);
// I try to use every item in column2List as column2, no one is right.
  1. Can not get element in Field.
let element = await field.getRecordFieldContent(Picklist) ;
// it is empty.

What is your expected behavior?

My project use a dynamic forms in record layout.
I need to create a new record in my e2e test.
I want to set value in field, but I can't get element in field.

PS: I can see element in Chrome developer tool, but no in wdio.
I try to use wdio + selector to get Field, it's also empty .

Steps to reproduce

Environment

  • Node.js: v18.12.1

  • OS: windows

  • Browser: [e.g. chrome]

  • Browser Version: [e.g. 119.0.2151.97, Chrome 120.0.6099.71]

      "@wdio/appium-service": "^8.26.1",
      "@wdio/cli": "^8.26.1",
      "@wdio/local-runner": "^8.26.1",
      "@wdio/mocha-framework": "^8.24.12",
      "salesforce-pageobjects": "^5.0.2",
      "wdio-utam-service": "^2.2.0"
    

Additional context

I found a URL, he had the same issuse. So I use his code as demo.
https://salesforce.stackexchange.com/questions/402434/what-am-i-missing-working-with-utam-and-creating-a-record-for-an-object-utilizin

then I print HTML to check, there are no element in records-record-picklist node.

console.log(await informationFieldSection.element.element.getHTML());

<flexipage-field-section2 lwc-mlenr16lk9-host=""><flexipage-column2 slot="columns" class="column flex-width" lwc-67tg8beuu47-host=""><fl
exipage-field data-field-id="RecordCustomerClassification_cField" lwc-6tp3buk1ht8-host=""><record_flexipage-record-field class="slds-grid slds-col slds-has-flexi-truncate" role="listitem" lw
c-618vdk5svck-host=""><records-record-picklist data-input-element-id="input-field" slot="input" lwc-2fnfn23k1jh-host=""></records-record-picklist></record_flexipage-record-field></flexipage-
field><flexipage-field data-field-id="RecordAccountName_cField" lwc-6tp3buk1ht8-host=""><record_flexipage-record-field class="slds-grid slds-col slds-has-flexi-truncate" role="listitem" lwc-
618vdk5svck-host=""><records-record-layout-lookup data-input-element-id="input-field" slot="input" lwc-5tti5094td7-host=""></records-record-layout-lookup></record_flexipage-record-field></fl
exipage-field><flexipage-field data-field-id="RecordAccountManage_cField" lwc-6tp3buk1ht8-host=""><record_flexipage-record-field class="slds-grid slds-col slds-has-flexi-truncate" role="list
item" lwc-618vdk5svck-host=""><records-record-layout-lookup data-input-element-id="input-field" slot="input" lwc-5tti5094td7-host=""></records-record-layout-lookup></record_flexipage-record-
field></flexipage-field></flexipage-column2><flexipage-column2 slot="columns" class="column flex-width" lwc-67tg8beuu47-host=""><flexipage-field data-field-id="RecordTargetReport_cField3" lw
c-6tp3buk1ht8-host=""><record_flexipage-record-field class="slds-grid slds-col slds-has-flexi-truncate" role="listitem" lwc-618vdk5svck-host=""><records-record-layout-checkbox data-input-ele
ment-id="input-field" slot="input" lwc-gjkarqdli1-host=""></records-record-layout-checkbox></record_flexipage-record-field></flexipage-field></flexipage-column2></flexipage-field-section2>

in chrome developer tool, I can see a lot element in records-record-picklist(lightning-picklist, lightning-combox...)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.