Possible Cause of Protractor Not Working when using Angular, Django, and Containers
Answer:
Problem
I was trying to get an Angular end-to-end (e2e) test working, but was running into issues where the data was not getting rendered by the component. The test involves fetching data from a backend service in a separate container and rendering the data. The unit tests for the Angular component and service was working fine. This was the first Protractor e2e test of the project so I wasn’t sure what was going on.
Solution
The issue ended up being a mixture of using Django and containers for the backend.
First, I had to allow Django to respond to requests made to a hostname other than localhost(which was what is used during development and unit tests):
ALLOWED_HOSTS = [
'backend',
]
backend is the name of the django service declared in my docker-compose.yml.
Second, I had to whitelist the selenium browser address to make CORS happy:
CORS_ORIGIN_WHITELIST = (
'localhost:4200',
'test-app:4200',
)
localhost:4200 is the normal development Angular app (inside it’s own container) on my development machine’s browser. test-app:4200 is the test Angular app on a selenium node, which in my case happens to be this container: https://hub.docker.com/r/selenium/node-chrome/
Notes
The e2e test itself was actually really simple:
describe('Greeters', () => {
beforeEach(() => {
browser.get('/greeters');
});
it('should display greeter messages', () => {
expect(element(by.css('.greeters li')).getText()).toBe('hello world');
});
});
I didn’t have to use async/await and everything just worked once my backend was configured correctly.
I couldn’t get the page objects to work. I’ll hopefully be able to tackle that another time.
